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 看下 我没去 搞 兼容 百度有 兼容的属性
更多文章：
arcgis怎么设置文本框样式？用JS怎么实现一个把一个文本框中的选中内容加粗，效果基本上和编辑器的加粗效果相同急需
2026年11月6日 10:50
2026年11月6日 10:40
bios setup（“Bios setup”怎么在电脑里面设置）
2026年11月6日 10:00
2026年11月6日 08:10
2026年11月6日 07:50
2026年11月6日 05:50
php递归删除目录（php怎么删除文件夹和文件夹下的所有文件）
2026年11月6日 03:30
vimoapp安卓手机版（制作VLog常用的APP有哪些呢）
2026年11月6日 01:50
拜登国防授权法案（少数国家对来自中国的旅客采取入境限制措施，中方：将采取对等措施）
2026年11月6日 00:40
2026年11月5日 22:50
