• css。过渡动画


    1.transition-property(过渡动画)

      

    div{
      -webkit-transition-property:width,height,color;
      transition-property:width,height,color
     }

    2.transition-duration(过渡动画所需时间)

        div{

          -webkit-trnasition-duration:5s;

              transition-duration:5s;

        }

    3.transition-timing-function(动画--过渡函数)

      ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))

      linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))

      ease-in:加速的过渡效果(等于cubic-bezier(0,0,0.58,1))

      ease-out:减速的过渡效果(等于cubic-bezier(0,0,0.58,1))

      ease-in-out:加速然后减速(等于cubic-bezier(0.42,0,0.58,1.0))

      cubic-bezier(n,n,n,n)0-1之间的数值

    div{
             -webkit-transition-timing-function:ease-in;
                     transition-timing-function:ease-in;
    }

    4.transition-delay(动画-过渡延迟时间)

    div  {
           -webkit-transition-delay:.1s;
                        transition-delay:.1s;
    }

    5.transition(过渡)

      transition:[none|<transition-property>]||<transition-duration>||

      <transition-timing-function>||<transition-delay>[,*]

    自定义动画

     1.animation-name(动画名称)

        div{

            webkit-animation-name:FromLeftToRight;

    }

    2.keyframes(关键帧)

      @keyframes<identifier>{

        from{

      }

        to{

      }

      }

    3.animation-duration(动画时间):

        /*动画的持续时间*/

      animation-duration:<time>

    4.animation-timing-function(动画的过渡速度):

      animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

    5.animation-delay(动画延迟时间)

      div{

          -webkit-animation-delay:1s;

      }

    6.animation-iteration-count(动画执行次数)

      animation-iteration-count:infinite|<number>

    div{

      -webkit-animation-iteration-count:2;

    }

    7.animation-direction(动画的顺序)

    animation-direction:normal|reverse|alternate|alternate-reverse

    normal:正常方向  reverse:反方向运行  

    alternate:动画先正常运行再反方向运行,并持续交替运行

    alternate-reverse:动画先反运行再正方向运行,并持续交替运行

    8.animation-play-state(动画的状态)

      animation-play-state:running|paused

      running:运动  paused:暂停

    9.animation-fill-mode

      animation-fill-mode:none|forwards|backwards|both

      none:默认值,不设置对象动画之外的状态

      forwards:设置对象状态为动画结束时的状态

      backwards:设置对象状态为动画开始时的状态

      both:设置对象为动画结束或开始的状态

    10.animation-fill-mode(动画复合属性)

       

     

  • 相关阅读:
    Rsync命令参数详解
    mysql 主从同步如何 把从数据的版本升级到指定的版本
    MySQL同步故障:" Slave_SQL_Running:No" 两种解决办法 (转)
    Linux VPS/服务器 网站及数据库自动本地备份并FTP上传备份脚本
    在kloxo中把不带www的域名做301到带www的域名
    mysql sorce 导入数据乱码问题解决
    linux后台运行和关闭SSH运行,查看后台任务
    centos下MySQL主从同步配置
    ecshop 无法上传产品图片 服务环境少了GD库
    EOJ2902 Contest
  • 原文地址:https://www.cnblogs.com/yek9520/p/5774881.html
Copyright © 2020-2023  润新知