CSS3（3）动画
2019-01-31 本文已影响0人
RachelCT
现在的网页设计风格多样，个人比较喜欢简约风的或者交互性强的。那种有舒服的动画效果的应用可以给我玩半天。今天这篇就总结一下CSS3中的动画属性和基本应用，后面会出一些动画制作效果。
CSS3中制作动画需要两个东西，一个是@keyframes 规则,另一个是animation动画属性。由于没有写实例，下面贴一篇菜鸟教程上面的实例供参考，先不要阅读代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
代码看起来较多，但我们只需要关注@keyframes和animation。@keyframes是用来规定动画，后面跟动画的名称。指定动画过程使用％，或关键字"from"和"to"，这是和0％到100％相同，上面的示例是使用了%的方式。animation用来指定动画属性，上面示例中用的是简略写法，每个参数的属性依次是：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
分别指定动画的名称、动画完成所需时间、动画完成一个周期的速度是怎样的（这个具体是有不同参数的，可以参考http://www.runoob.com/cssref/css3-pr-animation-timing-function.html）、动画启动前的延迟、动画播放次数（infinite是永久播放）、是否反向播放。最后两个参数可以不用指定，使用默认值，具体作用可参考http://www.runoob.com/cssref/css3-pr-animation.html。
