@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>] || [<animation-duration>] || [<animation-timing-function>] || [<animation-delay>] || [<animation-iteration-count>] || [<animation-direction>] || [<animation-play-state>] || [<animation-fill-mode>]
-
animation-name：主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。
animation-name: none | IDENT ;
1.IDENT：是由@keyframes创建的动画名称，换句话说IDENT需要和@keyframes中的IDENT一致，如果不一致将不能实现任何动画效果。
2.none：为默认值，当值为none时，将没有任何动画效果，其可以用于覆盖任何动画。 -
animation-duration：主要用来设置动画播放所需要的时间，一般以秒为单位。
animation-duration: <time>
1.<time>是用来指定元素播放动画所持续的时间，也就是从0%~100%一次动画所需时间，取值<time>为数值，单位为秒。
2.默认值为0，意味着动画周期为0，也就是没有动画效果，如果值为负值会被视为0. -
animation-timing-function：主要用来设置动画的播放方式。
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)
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: <time>
1.<time>取数值，单位为秒，用于定义在浏览开始执行动画之前等待的时间。 -
animation-iteration-count：主要用来指定动画播放的循环次数。
animation-iteration-count: infinite | <number>
1.infinite(正无穷)：动画无限次地播放。
2.<number>值通常为整数，但也可以使用带有小数的数字。其默认值为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的子属性可以合在一起写，每个子属性之间用空格隔开；还可以将多个动画应用到一个元素上，包括每个动画名称的简写的分组以逗号分隔开。
网友评论