css动画同时缩放和旋转

Question

如何在一个元素上同时运行两个动画以进行缩放(如放大)和同时旋转。

我试过了，但没成功

​

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(‘容器’).style=‘-webkit- kf_scale : kf_rotate 1s，webkit 1s'；

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

Document.getElementById(‘容器’).style=‘-webkit-动画: kf_scale 1s'；},3000)；

Answer 1

如果我理解这个问题，您是在覆盖style属性，所以您的初始transform也会被animation覆盖。因此，animation不会从transition的点开始，它将从元素的默认样式开始。animation从默认值(1) scale()到1，所以它不能伸缩。要使动画从上一个transform结束的位置缩放，请将transform的属性添加到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>

​

Answer 2

只需应用以下内容：

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;
}