CODEWITHSUNDEEP
csscss-animations
MTK
MTK

Reputation: 3580

css animation scale and rotate at same time

How to run two animations at same time on one element for scalling (like zoom in) and rotate simultaneously.

I have tried that but not work

setTimeout(function(){
    document.getElementById('container').style = '-webkit-transform:scale(0) rotate(0deg);';
},1000);
	 
//here I need to scale in and rotate at same time 
setTimeout(function(){

//That I have tried intitially and not woking 
//document.getElementById('container').style = '-webkit-animation : kf_scale 1s, kf_rotate 1s';

//As suggested by @Terry I have edited after to this but still not working
    document.getElementById('container').style = '-webkit-animation : kf_scale 1s';
},3000);
@-webkit-keyframes kf_scale {

100% {
	-webkit-transform:scale(1) rotate(360deg);
}
}	
@-webkit-keyframes kf_rotate {

100% {
	-webkit-transform:rotate(360deg);
}
}

#container{
width:100px;
height:100px;
border:solid 1px;
-webkit-transition: all 1s;
}
<div id="container">
    test animation scale + rotate
</div>

//That I have tried intitially and not woking

document.getElementById('container').style = '-webkit-animation : kf_scale 1s, kf_rotate 1s';

//As suggested by @Terry I have edited after to this but still not working

document.getElementById('container').style = '-webkit-animation : kf_scale 1s'; },3000);

Upvotes: 1

Views: 10463

Answers (2)

Chris Sprague
Chris Sprague

Reputation: 3592

Just apply the following:

Your.html

<div class="pop"></div>

your.css

@keyframes popDiv { 
    0%   {transform: scale(1)  rotate(0deg);}
    25%  {transform: scale(2) rotate(120deg);}
    50%  {transform: scale(.5) rotate(240deg);}
    100% {transform: scale(1) rotate(360deg);}
}

.pop{    
    animation: popDiv 8s alternate ease-in-out;
}

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

If I understand the problem, you're overwriting the style property, so your initial transform is overwritten with the animation. So the animation won't s frtartom the point of the transition, it will start from the default style of the element. The animation is scale()ing from the default (1) to 1, so it doesn't scale. To get the animation to scale from the point where the previous transform ended, add the properties of the transform to the first step of the animation

setTimeout(function(){
    document.getElementById('container').style = '-webkit-transform:scale(0) rotate(360deg);';
},3000);
	 
//here I need to scale in and rotate at same time 
setTimeout(function(){
    document.getElementById('container').style = '-webkit-animation : kf_scale 1s';
},5000);
@-webkit-keyframes kf_scale {
  0% {
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(-360deg);
  }
}	

#container{
width:100px;
height:100px;
border:solid 1px;
-webkit-transition: all 1s;
}
<div id="container">
    test animation scale + rotate
</div>

Upvotes: 2

Related Questions