学习css3中的动画

css animations 主要有两块构成，那么是哪两块呢？

1. keyframes : 定义了什么阶段展示什么样的动画
2.  animation 属性 ：把动画挂载到一个具体的dom上，并且定义如何动起来；

 

keyframes

keyframes 是动画的基础，它定义了动画在各个阶段的时间线上应该如何呈现。每一个 @keyframes 都应该包括下面：

1.  动画的名字， 比如说， @ keyframes bounceIn
2.  动画的各个阶段，0% 是最开始的阶段， 100%是最终的阶段，中间可以添加多个中间状态
3.  css的属性，在动画的各个阶段，css的属性分别是什么样的

下面是一个简单的 @keyframes :

1. @keyframes bounceIn {
2. 0%{
3. transform: scale(0.1);
4. opacity:0;
5. }
6. 60%{
7. transform：scale(1.2);
8. opacity:1
9. }
10. 100%{
11. transform: scale(1);
12. opacity:1
13. }
14. }

（如果你还对 css 强大的 transform　属性不熟悉的话，可以看我另外关于 transform 总结的教程， 强大的transform 配合 animation 简直就是魔法般的效果）

 

animation 属性

我们使用 @keyframes 声明好了一个动画， 但是还不够，我们要使用 animation 属性

animation 属性做了两件事情：

1. 把动画添加到了你想添加的那个元素
2. 定义动画是如何动起来的

所以，下面两个属性必须要添加到 dom 节点上： animation-name , animation-duration;

1. div {
2. animation-duration:2s;
3. animation-name: bounceIn;
4. }

为了更简洁的语法，我们推荐使用 合写 的写法：

1. div {
2. animation: bouncIn 2s;
3. }

采用 合写 的写法，所有的动画属性，我们都要挂到 animation 这个属性下面：

1. animation:[animation-name][animation-duration][animation-timing-function]
2. [animation-delay][animation-iteration-count][animation-direction]
3. [animation-fill-mode][animation-play-state];

请记住：要让动画正常的动起来，要按照上面的顺序来写，并且前两个属性是一定要有的。

 

为了构建更复杂的动画，需要再 将要运动的物体上 添加自定义属性：

animation-timing-function

设置缓动：ease( 默认 ) | ease-in | ease-out   

animation-delay

动画延迟了多少时间： 0 s( 默认 )

animation-interaction-count 

动画要循环多少次：#（默认是1） | infinite | initial 

Animation-direction

动画要正着播，倒着播：normal( 默认 ) | reverse | alternate | alternate - reverse ( 后面两个的在animation-interaction-count>1的情况下起作用 )

animation-fill-mode 

none(默认) | forwards | backwards | both

animation-play-state

running | pause  暂停后开始，是从之前位置无缝链接；

（animation-play-state :  不可以在animation 中简写，需要单独的加在要运动的动画身上)

 

你也可以在一个dom元素上增加多个 动画，他们之间只需要用 逗号隔开：

1. .div {
2. animation: slideIn 2s, rotate 1.75s;
3. }

 

 

 

animation 和 transition 的效果是很像的；

animation 是 定义一个动画，然后挂载到要运动的物体身上；

transition 是把transition 的属性写在要变化的物体身上，然后hover的时候改变样式；

transition可以当成是只有两帧的animation;

 

transition 和 transfrom 单词长的是很像的；

transfrom 作用是 2d 3d 的转换，

transfrom的主要方法有：

1. -webkit-transform :  translate ( 10px , 20px  )       // 常用在绝对定位的水平居中，垂直居中；
2. -webkit-transform : rotate( 12deg )
3. -webkit-transform : scale ( 1,3  )  宽度放大1倍，高度放大3倍
4. -webkit-transform :  skew（30deg,60deg） 沿x轴旋转的角度，沿y轴旋转的角度
5. transform-origin :  变换的基点

 

 

 

 

 

null