css动画
每个浏览器对于动画的兼容不是很好
一下是一些主流浏览器的动画前缀，详细的信息可以去看一下菜鸟教程。
在使用@keyframes 创建动画是 一定要绑定到一个选择器上，不然不会有执行效果
问题
总共是八个动画，文字和图片，要求文字本身是隐藏的当图片的动画执行时文字开始显示。每个图片对应着一段文字，这样看起很简单，但是另一个要求是当我所以得动画全部执行完毕之后 动画停止一段时间4s-5s 然后再次执行动画，因为在我们css3动画中是没有这个属性的。
解决方案
个人总共想到了三种解决方案。
1.
调用动画的延时属性+周期属性来进行解决问题
2.使用js来判断当我们动画结束的时候 removeclass删除样式
在使用延时调用的形式，给与时间再次 添加样式已达到效果
以上这两种方式都可以实现效果是不够简洁，所以我推荐使用第三种方式来解决这个问题
3.根据动画的百分比的形式设定动画的执行事件的时间 代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="slex1" style="width: 200px; height: 200px; background: yellow;">
</div>
<div id="slex2" style="width: 200px; height: 200px; background: blue;">
</div>
<div id="slex3" style="width: 200px; height: 200px; background: red;">
</div>
<div id="slex4" style="width: 200px; height: 200px; background: aqua;">
</div>
</body>
</html>
<style>
#slex1 {
opacity: 0;
animation: name1 8s infinite;
}
//设置第一动画在20%的时候执行完毕一直到100%都是执行完毕的状态
@keyframes name1 {
0% {
opacity: 0;
}
20% {
opacity: 1
}
100% {
opacity: 1
}
}
#slex2 {
opacity: 0;
animation: name2 8s infinite;
}
//设置第一动画在40%的时候执行完毕一直到100%都是执行完毕的状态
@keyframes name2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 1
}
100% {
opacity: 1;
}
}
#slex3 {
opacity: 0;
animation: name3 8s infinite;
}
//设置第一动画在60%的时候执行完毕一直到100%都是执行完毕的状态
@keyframes name3 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#slex4 {
opacity: 0;
animation: name4 8s infinite;
}
//设置第一动画在80%的时候执行完毕一直到100%都是执行完毕的状态
@keyframes name4 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
效果如下 动画会在全部执行完毕之后还会停止一段时间。
根据不同动画时间的不同如果是更多的动画就需要更加精心的计算了。