CODEWITHSUNDEEP
javascriptjquerycssanimation
ikiK
ikiK

Reputation: 6532

Truble with CSS transform and animation scaling of element

I have an icon that on load bounces and then scales down in corner. On hover it scales up and down properly using transition: transform.

I initiate bounce on setInterval and on first load. Problem is that on bouncing it scales without ease animation. It just shrinks immediately. I repeat on hover it works fine. Id like to before and after the bounce to be same as hover scaling animation. JS solution also would be good.

I tried all sorts of things and figure out how to make it work, please advise. 

window.setInterval(function() {
     	$( ".email" ).toggleClass( "bounceemail" );
}, 5000);
.bounceemail {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	
}

.email {
	max-width: 150px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	margin-bottom: 5px;
	margin-right: 5px;
	z-index: 70;
	-webkit-filter: drop-shadow( 3px 3px 2px black); 
	transition: transform 0.3s;
	transform: scale(0.6)translate(+35%, +35%);
	transition-timing-function: ease-in;
}


.email:hover {
	transition: transform 0.2s;
	transform: scale(1)translate(0%, 0%);
	transition-timing-function: ease-out;
}
@-webkit-keyframes bounce {
	0%,
	20%,
	55%,
	75%,
	100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-45px);
	}
	60% {
		-webkit-transform: translateY(-35px);
	}
}

@keyframes bounce {
	0%,
	20%,
	55%,
	75%,
	100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-45px);
	}
	60% {
		-webkit-transform: translateY(-35px);
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<object data="your.svg" type="image/svg+xml">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18  meni-pulse  email bounceemail" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
						</object>

EDIT Found a solution that works properly, it is that initial scale of icon is 1 (not smaller like in version above), and bouncing works without hiccups. And on hover I stop the bounce and scale it from 1 to up. That way there is no collisions.

Aldo it would be interesting to see if someone would make this version working.

Upvotes: 1

Views: 93

Answers (1)

user120242
user120242

Reputation: 15268

$(".email").on("animationend",()=>{
     	$( ".email" ).toggleClass( "bounceemail" )
      setTimeout(()=>$( ".email" ).toggleClass( "bounceemail" ),5000);
});
.bounceemail {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.email {
	max-width: 150px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	margin-bottom: 5px;
	margin-right: 5px;
	z-index: 70;
	-webkit-filter: drop-shadow( 3px 3px 2px black); 
}

.shrink {
	transition: transform 0.3s;
  transform: scale(0.6,0.6) translate(30%, 30%);
  transition-timing-function: ease-in;
}


.email:hover {
	transition: transform 0.2s;
	transform: scale(1) translate(0%, 0%);
	transition-timing-function: ease-out;
}
@-webkit-keyframes bounce {
	0%,
	20%,
	55%,
	75%,
	100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-45px);
	}
	60% {
		-webkit-transform: translateY(-35px);
	}
  100% {
  	transform: scale(0.6,0.6) translate(30%, 30%);
  }
  0% {
  	transform: scale(0.6,0.6) translate(30%, 30%);
  }
}

@keyframes bounce {
	0%,
	20%,
	55%,
	75%,
	100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-45px);
	}
	60% {
		-webkit-transform: translateY(-35px);
	}
  100% {
  	transform: scale(0.6,0.6) translate(30%, 30%);
  }
  0% {
  	transform: scale(0.6,0.6) translate(30%, 30%);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<object data="your.svg" type="image/svg+xml">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18  meni-pulse  email bounceemail shrink" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
						</object>

T

Upvotes: 1

Related Questions