码迷,mamicode.com
首页 > Web开发 > 详细

css。过渡动画

时间:2016-08-16 01:52:34      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

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(动画复合属性)

   技术分享

 技术分享

 

css。过渡动画

标签:

原文地址:http://www.cnblogs.com/yek9520/p/5774881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!