css3動畫delay為負值時的效果 運行效果...
<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）開始
