animation写动画

Posted 2020-08-22 星星眨眼

最近，接到项目需求，需要写大量的动画，那么怎么写呢？

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

我们知道CSS3的Animation有八个属性

1. animation-name
2. animation-duration
3. animation-delay
4. animation-iteration-count
5. animation-direction
6. animation-play-state
7. animation-fill-mode
8. animation-timing-function

其中，1是动画名字，2是动画的时间，3是动画的延时，4是动画的次数，5是动画是否逆向播放，6是动画是否在运行或者是暂停，7是动画之外的状态，8是动画的执行曲线。

例如：

div
{
animation: myfirst 5s 1s infinite;
-moz-animation: myfirst 5s 1s infinite; /* Firefox */ 
-webkit-animation: myfirst 5s 1s infinite; /* Safari 和 Chrome */ 
-o-animation: myfirst 5s 1s infinite; /* Opera */ 
}

　那么，如何让我们的动画动起来呢？这就需要用到keframes了。

例如：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

　　通过animation和keyframes的配合就可以写出炫酷的动画效果了。