CSS3动画

@keyframes关键帧的语法:

1.命名以@keyframes开头,后面紧跟着是“动画的名称”,再加上一对花括号“{...}”,括号种就是不同时间段样式规则,即CSS样式。
2.一个@keyframes中的样式规则是由多个百分比构成的,如0%~100%,可以在这个规则中创建更多个百分比,从而让元素达到一种不断变化的效果。(百分号不可省略,否则@keyframes是无效的
3.可以使用“from” “to”代表一个动画是从哪开始,到哪结束,也就是说from就相当于0%,而to相当于100%。

@keyframes IDENT {
form{
    /*CSS样式写在这里*/
  }
percentage{
    /*  CSS样式写在这里*/
  }
to{
    /*CSS样式写在这里*/
  }
}
@keyframes IDENT{
0%{
    /*CSS样式写在这里*/
  }
percentage{
    /*CSS样式写在这里*/
  }
100%{
    /*CSS样式写在这里*/
  }
}

其中IDENT就是一个动画名称,可以取一个任意定义的动画名称;percentage是一个百分比值,用来定义某个时间段的动画效果。


CSS3动画属性:

animaton: [] || [] || [] || [] || [] || [] || [] || []

  • animation-name:主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画,从而执行动画。
    animation-name: none | IDENT ;
    1.IDENT:是由@keyframes创建的动画名称,换句话说IDENT需要和@keyframes中的IDENT一致,如果不一致将不能实现任何动画效果。
    2.none:为默认值,当值为none时,将没有任何动画效果,其可以用于覆盖任何动画。

  • animation-duration:主要用来设置动画播放所需要的时间,一般以秒为单位。
    animation-duration:
    1.

  • animation-timing-function:主要用来设置动画的播放方式。
    animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)
    1.ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。
    2.linear:元素样式从初始状态过渡到终止状态速度是恒速。
    3.ease-in:元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态,这种效果称为渐显效果。
    4.ease-out:元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态,这种效果称为渐隐效果。
    5.ease-in-out:元素样式从初始状态到终止状态时,先加速再减速,这种效果称为渐显渐隐式效果。
    6.cubic-bezier:三次贝塞尔曲线值分别为(p0,p1,p2,p3),值为0~1之间的小数,注意p0和p3两个点是无法设置的,因为他们总是存在HTML种,也就是说他们总会是(0,0)和(1,1)。

  • animation-delay:主要用来指定动画开始的方式,一般以秒为单位。
    animation-delay:
    1.

  • animation-iteration-count:主要用来指定动画播放的循环次数。
    animation-iteration-count: infinite |
    1.infinite(正无穷):动画无限次地播放。
    2.值通常为整数,但也可以使用带有小数的数字。其默认值为1,意味着动画将从开始到结束只播放一次。

  • animation-direction:主要用来指定动画的播放方向。
    animation-direction: normal | alternate
    1.normal:为默认值,动画的每次循环都是向前播放。
    2.alternate:动画播放为偶数次则向前播放,为奇数次则反方向播放。

  • animation-play-state:主要用来控制动画的播放状态。
    animation-play-state: running | paused
    1.running:主要作用类似于音乐播放器,可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,也可能是从暂停的那个位置开始播放。
    2.paused:可以通过paused将正在播放的动画停下来,如果暂停了动画的播放,元素的样式将回到最原始设置状态。

  • animation-fill-mode:主要用来设置动画的时间外属性,即动画在开始和结束之后发生的操作。
    animation-fill-mode: none | forwards | backwards | both
    1.none:为默认值,表示动画按预期进行和结束,在动画完成最后一帧时,动画会反转到初始帧处。
    2.forwards:动画结束后继续应用最后关键帧的位置。
    3.backwards:会在向元素应用动画样式时迅速应用动画的初始帧。
    4.both:元素动画同时具有forwards和backwards效果。

animation的子属性可以合在一起写,每个子属性之间用空格隔开;还可以将多个动画应用到一个元素上,包括每个动画名称的简写的分组以逗号分隔开。

你可能感兴趣的:(CSS3动画)