CSS3 动画 animation（二）
程序员文章站
2024-03-25 12:33:28
...
这是一个比较简单的例子
先看一个简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
div {
width: 200px;
height: 200px;
background-color:red;
position: relative;
animation-name: an; /* 动画名称 */
animation-duration:5s; /* 运动时间为5s */
animation-timing-function:linear; /* 运动速度曲线 */
animation-delay:0; /* 动画延除时间 */
animation-iteration-count:infinite; /* 动画执行次数 */
animation-direction:alternate; /* 动画逆向运动，这个是奇正，偶反的 */
}
@keyframes an {
0% {background-color: red;left:0;top:0;}
35% {background-color: blue;left:300px;top:0;}
55% {background-color: yellow;left:300px;top: 300px;}
75% {background-color: pink;left:0;top:300px;}
100% {background-color: red;left:0;top:0;}
}
@-webkit-keyframes an {
0% {background-color: red;left:0;top:0;}
35% {background-color: blue;left:300px;top:0;}
55% {background-color: yellow;left:300px;top: 300px;}
75% {background-color: pink;left:0;top:300px;}
100% {background-color: red;left:0;top:0;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>上次在@keyframes 中只是用了from与to作为开始与结束，这次用的是百分比，这个是最常用 的了，可以很方便地控制进度。
其实它们还有简写属性的：
animation一共有八个属性，其中有七个是可以简写成animation的。
另外一个不能简写的属性是animation-play-state属性
以上例子可以简写成 ，如下：
6行的代码一行就搞定了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
div {
width: 200px;
height: 200px;
background-color:red;
position: relative;
animation: an 5s linear 1s infinite alternate; /* 这是简写的 */
}
@keyframes an {
0% {background-color: red;left:0;top:0;}
35% {background-color: blue;left:300px;top:0;}
55% {background-color: yellow;left:300px;top: 300px;}
75% {background-color: pink;left:0;top:300px;}
100% {background-color: red;left:0;top:0;}
}
@-webkit-keyframes an {
0% {background-color: red;left:0;top:0;}
35% {background-color: blue;left:300px;top:0;}
55% {background-color: yellow;left:300px;top: 300px;}
75% {background-color: pink;left:0;top:300px;}
100% {background-color: red;left:0;top:0;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>当然他们还是有默认值的：
上面动画中的用到的属性的默认值分别，如下：
animation-duration:0 即是动画开始到结束默认是立刻结束的
animation-timing-function:ease 即是开始时慢，然后加快，在要结束前又变慢 ，慢---->快---->慢
animation-delay:0 即是立刻运动
animation-iteration-count:1 即是动画只运动一次
animation-direction:normal 即是动画正常运动