zoukankan      html  css  js  c++  java
  • css3整理--Animation

    animation语法:

      1、动画的定义

      @keyframes IDENT {

        from { Properties:Properties value; }

        Percentage { Properties:Properties value; }

        to { Properties:Properties value; } }

      或者全部写成百分比的形式:

      @keyframes IDENT {

        0% { Properties:Properties value; }

        Percentage { Properties:Properties value; }

        100% { Properties:Properties value; } }

      其中 IDENT 是动画的名称,语义化即可。

      from指定动画开始时的属性值,可以使用百分比代替

      to指定动画结束时的属性值,也可以使用百分比代替

      Percentag可以指定中间任意多个值,来指定动画的轨迹

      2、动画的调用

      animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名,支持指定多个动画,中间逗号分隔*/

      animation-duration: 10s;/*动画持续时间*/

      animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

      animation-delay: 2s;/*动画延迟时间*/

      animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

      animation-direction: alternate;/*定义动画方式,alternate指动画执行偶数次时向前播放,奇数次时向后播放*/

  • 相关阅读:
    86. Partition List
    2. Add Two Numbers
    55. Jump Game
    70. Climbing Stairs
    53. Maximum Subarray
    64. Minimum Path Sum
    122. Best Time to Buy and Sell Stock II
    以场景为中心的产品设计方法
    那些产品经理犯过最大的错
    Axure教程:如何使用动态面板?动态面板功能详解
  • 原文地址:https://www.cnblogs.com/charling/p/3627540.html
Copyright © 2011-2022 走看看