animation写动画

最新推荐文章于 2023-02-24 20:58:04 发布

转载最新推荐文章于 2023-02-24 20:58:04 发布 · 109 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanxuan/p/6092602.html

本文介绍如何使用CSS3的animation属性及关键帧实现动画效果。详细解释了animation的八大属性，并通过实例展示了如何设置动画名称、时长、延时、迭代次数等参数，以及如何运用keyframes定义动画状态。

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

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

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

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
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的配合就可以写出炫酷的动画效果了。

转载于:https://www.cnblogs.com/yanxuan/p/6092602.html