CSS中的动画属性

动画模块

过渡和动画之间的异同

  • 不同点

    • 过渡必须人为的触发才会执行动画
    • 动画不需要人为的触发就可以执行动画

  • 相同点

    • 过渡和动画都是用来给元素添加动画的
    • 过渡和动画都是系统新增的一些属性
    • 过渡和动画都需要满足三要素才会有动画效果

规定动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

animation

1
2
3
4
5
6
7
8
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
animation-delay: 2s;
animation-iteration-count: n | infinite
animation-direction: normal | alternate;
animation-play-state: paused | running;
animation-fill-mode : none | forwards | backwards | both;
1
2
3
4
5
6
linear  /*动画从头到尾的速度是相同的*/
ease    /*默认。动画以低速开始，然后加快，在结束前变慢。*/
ease-in /*动画以低速开始*/
ease-out    /*动画以低速结束。*/
ease-in-out /*动画以低速开始和结束。*/
cubic-bezier(n,n,n,n) /*在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/

简写

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

注意点

  • 动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
  • 在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面