@panhonhang
2018-07-23T11:03:53.000000Z
字数 2872
阅读 891
css
在早期web中要实现动画效果，都是依赖于JavaScript或flash来完成。，但是css3增加了一个新的模块transition，可以通过css事件来触发元素的外观变化。就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发，并平滑地以动画效果来改变css的属性值。
CSS动画的两大组成部分：transition和animation。
一. 过渡属性transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值。
css过渡属性
过渡属性是一个复合属性，主要包括以下几个属性
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition的使用注意
（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
（2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
（3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
二. CSS Animation
1.@keyframes规则
keyframes被称为关键帧，其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头，后满紧跟着是动画名称加上一对花括号{...}，括号中就是一些不同时间段样式规则
在一个"@keyframes"中的样式规则可以有多个百分比构成的，如在”0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to
animation-name属性主要用来调用@keyframes定义好的动画，需要特别注意：animation-name调用的动画名需要和"@keyframes“定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀，Firefox加上-moz-。
2.animation属性
(1) animation-duration属性:
主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需的时间
(2)animatino-timing-function属性:
主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性的变换速率，就是动画的播放方式。它和transition中的transition-timing-function 中的值一样
(3)animation-delay属性:
用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。
(4)animation-iteration-count属性:
主要用来定义动画的播放次数，其通常为整数，单页可以为小数，其默认值为1，这意味着动画将从开始到结束只播放一次；如果取值为infinite，动画将无限次的播放。
(5) animation-direction属性:
主要用来设置动画播放方向，其主要有两个值：normal、alternate
normal是默认值，如果设置为normal时，动画每次循环都是向前播放
另一个是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放
(6)animtion-play-state属性:
是用来控制元素动画的播放状态。其主要有两个值：running和paused。
其中running是其默认值，可以通过该值将暂停的动画重新比方，这里的重新播放不一定是从元素动画的开始播放，而是从暂定的那个位置开始播放。如果暂定了动画的播放。元素的样式将回到最原始设置状态.animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。
-webkit-animation动画有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd（translation仅仅有这一个事件）
浏览器前缀
目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。
也就是说，实际运用中，代码必须写成下面的样子。
div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}