css3动画连续执行两个怎么做

Posted 2023-03-25

.sec01_show #cycle1
//动画一，从小到大进入

opacity: 1!important;
-webkit-animation: ico_cycle_cir 1s linear;
//动画二，无限旋转
-webkit-animation: rotate linear;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;

我怎么让先执行了动画一之后再执行动画二呢？这样写的话，直接就执行了动画二，而没有执行动画一，写了delay也不行，求告诉，怎么做

animation定义和用法 animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction 默认值： none 0 ease 0 1 normal 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。语法 animation: name duration timing-function delay iteration-count direction;animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。（值：n次，infinite无限循环） animation-direction 规定是否应该轮流反向播放动画。 总结： 根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。 例如：divanimation:mymove 5s 5s infinite;-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */ 参考技术A

用js改变css样式，-webkit-animation: ico_cycle_cir变为第二个动画的样式，可以用setTimeout来做



把两个css3动画写成一个动画

追问

@-webkit-keyframes ico_cycle_cir
0% opacity: 0;-webkit-transform: scale(0);
100% -webkit-transform: scale(1);

追答

你想表达什么