<html>
<head>
<title>css3动画delay为负值时的效果</title>
<meta charset="UTF-8"/>
<style type="text/css">
.he{
width: 400px;
height: 200px;
background: #eee;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
.he div{
width: 4px;
height: 30px;
background-color: green;
display: inline-block;
animation-name: myniy;
animation-duration: 1.2s;
animation-iteration-count: infinite;
}
.m1{
animation-delay: -1.1s;
}
.m2{
animation-delay: -1.0s;
}
.m3{
animation-delay: -0.9s;
}
.m4{
animation-delay: -0.8s;
}
.m5{
animation-delay: -0.7s;
}
.m6{
animation-delay: -0.6s;
}
@keyframes myniy{
0%,30%,70%,100%{
transform: scale(1,0.5);
}
50%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="he">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5"></div>
<div class="m6"></div>
</div>
</body>
</html>
运行效果图
animation-delay为负值时表示，动画跳过多少秒进入动画周期。
上面要注意的地方，关键帧对称
0%,30%,70%,100%{
transform: scale(1,0.5);
}
50%{
transform: scale(1);
}延迟为-（1.2-0.1）开始
时间： 2024-11-08 22:20:57