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指动画执行偶数次时向前播放,奇数次时向后播放*/

  • 相关阅读:
    【刷题】洛谷 P4319 变化的道路
    【刷题】BZOJ 4573 [Zjoi2016]大森林
    CSS3_天猫商品墙
    CSS3_3D 变换
    CSS3_扇形导航_transitionend 事件
    CSS3_过渡_2D 变换_瓶体旋转_动态时钟
    CSS3_多列布局
    CSS3_线性渐变_径向渐变----背景
    CSS3_盒子背景
    CSS3_盒阴影_倒影_盒子大小可调
  • 原文地址:https://www.cnblogs.com/charling/p/3627540.html
Copyright © 2011-2022 走看看