CSS3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。

 

CSS3动画有哪些实现方式？

Transitions 、transforms和 Animations

　　Transitions特点：平滑的改变CSS的值

　　transforms特点：变换主要实现（拉伸，压缩，旋转，偏移）

　　Animations特点：适用于CSS2，CSS3

 

animation & transition的相同点和不同点？

　　相同点：

　　　　都是随着时间改变元素的属性值。

　　不同点：

　　　　transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；

　　　　初始效果——最终的效果之间的变化；

　　　　animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值

　　　　初始效果———动画帧———动画帧————最终的效果

 

浏览器支持

　　Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

　　Chrome 和 Safari 需要前缀 -webkit-。

　　注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

 

1 /* @keyframes */
2 @keyframes mymove{}
3 @‐webket‐keyframes mymove{}
4 /* animation */
5 animation{}
6 ‐webket‐animation{}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

今天我们说一下动画属性Animation，单从Animation字面上的意思，我们就知道是“动画”的意思。

如需在 CSS3 中创建动画，我们需要先来学习 @keyframes 规则。

 

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。

 

关键帧属性 @keyframe

 

不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，

或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，

而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

 

语法：( 0% = from 100% = to )

1 @keyframes mymove{
2 　　from{初始状态属性}
3 　　to{结束状态属性}
4 }

1 @keyframes mymove{
2　　 0%{初始状态属性}
3 　　50%{中间再可以添加关键帧}
4 　　100%{结束状态属性}
5 }

实例：改变颜色

1 @keyframes myfirst2 {
3 　　from {background: red;}
4 　　to {background: yellow;}
5 }

实例：改变背景色和位置

1 @keyframes myfirst2 {
3 　　0% {background: red; left:0px; top:0px;} 
　　　25% {background: yellow; left:200px; top:0px;}
5 　　50% {background: blue; left:200px; top:200px;}
6 　　75% {background: green; left:0px; top:200px;}
7 　　100% {background: red; left:0px; top:0px;}
8 }

Animation 属性：

 

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

 

1、animation-name 动画名称(必要的)

必须与规则@keyframes配合使用，

1 @keyframes mymove{
2 　　from {background: red;}
3 　　to {background: yellow;}
4 }
5 div{animation‐name:mymove;}

2、animation-duration持续时间(必要的)

1 animation‐duration:3s;

 

3、animation-timing-function 过渡类型

 

属性值

• linear：线性过渡。
• ease：平滑过渡。
• ease-in：由慢到快。
• ease-out：由快到慢。
• ease-in-out：由慢到快再到慢。
• step-start:马上跳到动画每一结束桢的状态【实现逐帧动画效果】

 

1 animation‐timing‐function:linear;

 

4、animation-delay 延迟时间

1 animation‐delay:0.5s;

 

5、animation-iteration-count 循环次数

属性值infinite：无限循环

number: 循环的次数；默认是1，可以设置其它数值 如：2 3...

1 animation‐iteration‐count:infine;

 

6、animation-direction 运动方向

属性值

normal：正常方向 0-100%

reverse：反方向运行 100-0%

alternate：动画先正常运行再反方向运行，并持续交替运行 0-100-0%

alternate-reverse：动画先反运行再正方向运行，并持续交替运行 100-0-100%

1 animation‐direction:normal;

7、animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放

时），要应用到元素的样式。

 

属性值

• none 默认值。延迟之后，执行0%时，里面的效果
• backwards 延迟之前，执行0%时，里面的效果
• forwards 在动画结束后，停留在动画结束的位置。【重点记忆】
• both 动画遵循 forwards 和 backwards 的规则。也就是说，动画初始执行0%，结束停留到结束的
• 位置。

1 animation‐fill‐mode:forwads;

8、animation-play-state 动画状态

 

属性值

• running:运动
• paused: 暂停; 当鼠标经过时动画停止，鼠标移开动画继续执行(一般使用在划过的效果里面)

1 div:hover{animation‐play‐state:paused;}

9、简写animation

animation：动画名称 动画持续时间 过渡类型 延迟时间 循环 运动方向

（ 2个时间：第一个时过渡时间 ；第二个时延迟时间 ）

1 animation：mymove 2s linear 0.5s infine alternate;

推荐：一款强大的预设css3动画库。

官网地址：https://daneden.github.io/animate.css/

 

引入：

<link rel="stylesheet" href="animate.min.css">

　　

基本使用：

• 　animated 类（必需）--- 基类(基础的样式，每个动画效果都需要加)
• 　infinite 类 -- 循环运动

1 /* bounce 为选中的动画效果名称 */
2 <h1 class="animated infinite bounce">Example</h1>

拓展：浏览器前缀

• -ms- IE浏览器专属的CSS属性需添加-ms-前缀
• -moz- 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
• -o- Opera浏览器专属的CSS属性需添加-o-前缀
• -webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀