学习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 :  变换的基点
 
 
 
 
 
上一篇:CSS3中的动画功能(二)


下一篇:javascript中apply()方法解析-简单易懂!