css3animation两个动画交替（css3动画连续执行两个怎么做）
本文目录
css3动画连续执行两个怎么做
如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》执行两个CSS3动画《/title》
***隐藏网址***
《style》
*{ padding:0;margin:0;font-size:14px;box-sizing:border-box; }
.div{ margin: 50px auto;width: 240px;height: 240px;text-align: center;line-height: 240px;background: #34343A;color: #FFF; }
.dh{ animation: dh 4s linear both; }
@keyframes dh{
0%{
border-radius: 0px;transform: rotateZ(0deg);
}
50%{
border-radius: 50%;transform: rotateZ(0deg);
}
100%{
border-radius: 10%;
transform: rotateZ(360deg);
}
}
.dh1{ animation: dh1 2s linear both; }
@keyframes dh1{
0%{
border-radius: 0px; transform: rotateZ(0deg);
}
100%{
border-radius: 50%; transform: rotateZ(0deg);
}
}
.dh3{ animation: dh3 2s linear both; }
@keyframes dh3{
0%{
border-radius: 50%; transform: rotateZ(0deg);
}
100%{
border-radius: 10%; transform: rotateZ(360deg);
}
}
《/style》
《/head》
《body》
《div class="div dh"》纯CSS《/div》
《div class="div div1"》js控制《/div》
《/body》
《script type="text/javascript"》
$(function(){
$(’.div1’).addClass(’dh1’);
var t = parseFloat( $(’.dh1’).css(’animation-duration’) );
setTimeout(function(){
$(’.div1’).removeClass(’dh1’).addClass(’dh3’);
},t*1000);
});
《/script》
《/html》
css中3d动画两个动画交替运动
你是要在 不同的时间内 执行两个动画 我这有个例子 你看下
#div61{
background-color:#CC9966;
height:155px;
width:155px;
animation:dong 7s ease-in-out 0s 1 normal;
-moz-animation:dong 7s ease-in-out 0s 1 normal;
-webkit-animation:dong 7s ease-in-out 0s 1 normal;
-o-animation:dong 7s ease-in-out 0s 1 normal;
}
@keyframes dong{
0%{
transform:rotateX(0deg);
}
30%{
transform:rotateX(120deg);
}
70%{
background-color:#CC9966;
}
100%{
background-color:red;
}
}
用火狐 或则 360 看下 我没去 搞 兼容 百度有 兼容的属性
更多文章：
数据库管理系统和数据库系统分别侧重（数据库，数据库管理系统，数据库系统，这三个分别是什么意思并举个实例）
2026年9月7日 17:00
2026年9月7日 16:10
2026年9月7日 15:40
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
