css 动画 transition及animation

文章原址： http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html css 动画 阮一峰笔记：一、Transition（过渡）：作用：在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。            transition的作用在于，指定状态变化所需要的时间。语法：1.transition简写属性：

transition: property duration timing-function delay;

1)例如：使图片1秒内高度变化

img{
width:100px;
height:100px;
 transition: 1s height;
}

img:hover{
width:300px;
height:300px;
}

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：2)例如：使图片1秒内高度变化，宽度延时1秒后，1秒内宽度变化。

div
{
width:100px;
transition: width 2s,height 2s;
｝

2.完整属性名称：

transition-property: ;       //设置属性值，例如width,
transition-duration: ;       //
transition-timing-function: ;//过渡方式：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition-delay: ;          //

注：Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，需要前缀 -webkit-。3.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)等等。4.transition的局限（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。二、animation（动画）：1.Animation ：作用：将动画与 元素绑定。用法：需要指定动画一个周期持续的时间，以及动画效果的名称。

animation: name duration timing-function delay iteration-count direction;

4000属性全称：

animation-name:;                   //绑定到选择器的 keyframe 名称。animation-duration:;               //规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function:; 

//规定动画的速度曲线

animation-delay: //规定在动画开始之前的延迟。animation-iteration-count: //规定动画应该播放的次数。n|infinite(无限次播放)animation-direction: //规定是否应该轮流反向播放动画。normal|alternate（轮流反向播放）|reverse|alternate-reverse;例如：

div:hover {animation: 1s rainbow;}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {0% { background: #c00; }50% { background: orange; }100% { background: yellowgreen; }}

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。其他属性：1）animation-fill-mode：动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。-none：默认值，回到动画没开始时的状态-forwards：表示让动画停留在结束状态-backwards：让动画回到第一帧的状态。-both: 根据animation-direction（见后）轮流应用forwards和backwards规则。2）steps函数:可以实现分步过渡

div:hover {animation: 1s rainbow infinite steps(10);}

3)animation-play-state:有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。-paused：暂时-running：继续播放2.@keyframes:作用：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。它是用来定义一个动画效果，动态的执行过程中需要变化的部分。这个动画名称会用于animation中。语法：支持的属性from,to或百分比Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。