你的位置:首页 > 网页设计

[网页设计]css3动画使用技巧之——transform


<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)开始