animation的常用取值 CSS3骚样式之二

CSS3骚样式之二

   名为动画,有多会玩就有多骚。

 animation

1、animation-name

  指定要绑定到选择器的动画的名称  

  创建一个动画,为动画取名为ball:

              @keyframes ball{内容}

  调用:

    animation-name:ball;

2、animation-duration

  定义动画完成一个周期需要多少秒或毫秒

  animation-duration:2s;

3、animation-timing-function

  指定动画在时间内将如何完成一个周期

linear 动画从头到尾的速度是相同的
ease 默认值,动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

  注:animation-timing-function使用的数学函数,称为三次贝塞尔曲线,速度曲线。上面为预先定义的值,也可以自己定义。

4、animation-delay

  定义动画开始前等待的时间,以秒或毫秒计,默认值为0,允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

5、animation-iteration-count

  定义动画应该播放多少次,可以为数字次数或infinite无限次。

6、animation-direction

  定义是否循环交替反向播放动画。

normal 默认值,动画按正常播放
reverse 动画反向播放
alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放
alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放

 7、animation-fill-mode

  规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

  感觉这个用不大上,就列两个值:

none 默认值,动画在动画执行之前和之后不会应用任何样式到目标元素
forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值

 

 8、animation-play-state

  指定动画是否正在运行或已暂停。

 

paused 指定暂停动画
running 指定运行动画

猜你喜欢

转载自www.cnblogs.com/jiayouba/p/11827813.html