HTML5技术

css3动画使用技巧之——transform-delay为负值时的应用。 - 云翳1895

字号+ 作者:H5之家 来源:博客园 2016-01-19 16:00 我要评论( )

css3动画delay为负值时的效果 .he { width height background margin text-align line-height .he div { width height background-color display animation-name animation-duration animation-iteration-count .m1 { animation-delay .m2 { animation-delay

css3动画delay为负值时的效果 .he{ width height background margin text-align line-height .he div{ width height background-color display animation-name animation-duration animation-iteration-count .m1{ animation-delay .m2{ animation-delay .m3{ animation-delay .m4{ animation-delay .m5{ animation-delay .m6{ animation-delay @keyframes myniy{ 0%,30%,70%,100%{ transform 50%{ transform }

运行效果图

animation-delay为负值时表示,动画跳过多少秒进入动画周期。

上面要注意的地方,关键帧对称

0%,30%,70%,100%{ transform: scale(1,0.5); } 50%{ transform: scale(1); }
延迟为-(1.2-0.1)开始

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3 选择器 - Glunefish

    CSS3 选择器 - Glunefish

    2017-04-22 09:00

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

  • 【CSS3】精美横向滚动菜单按钮 - Glunefish

    【CSS3】精美横向滚动菜单按钮 - Glunefish

    2017-04-14 14:00

  • 【CSS3动画】下拉菜单模拟 - Glunefish

    【CSS3动画】下拉菜单模拟 - Glunefish

    2017-04-12 13:00

网友点评
j