<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; -webkit-animation-name: myniy; -webkit-animation-duration: 1.2s; -webkit-animation-iteration-count: infinite; -moz-animation-duration: 1.2s; -moz-animation-name: myniy; -moz-animation-iteration-count: infinite; } .m1{ animation-delay: -1.1s; -webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; } .m2{ animation-delay: -1.0s; -webkit-animation-delay: -1.0s; -moz-animation-delay: -1.0s; } .m3{ animation-delay: -0.9s; -webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; } .m4{ animation-delay: -0.8s; -webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; } .m5{ animation-delay: -0.7s; -webkit-animation-delay: -0.7s; -moz-animation-delay: -0.7s; } .m6{ animation-delay: -0.6s; -webkit-animation-delay: -0.6s; -moz-animation-delay: -0.6s; } @keyframes myniy{ 0%,30%,70%,100%{ transform: scale(1,0.5); } 50%{ transform: scale(1); } } @-webkit-keyframes myniy{ 0%,30%,70%,100%{ transform: scale(1,0.5); } 50%{ transform: scale(1); } } @-moz-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）开始
