CSS中 animation 可以实现页面动画效果。
1. 使用方法：
/*元素绑定动画：*/
/*1. 集中值写法*/
animation: name duration timing-function delay iteration-count direction;
/*2. 分开值写法*/
animation-name: "";
animation-duration："" ;
animation-timing-function: "";
animation-delay: "";
animation-iteration-count:"";
animation-direction:"";
/*动画内容*/
/*1. from to 开始到结束*/
@keyframes name{
from{}
to{}
}
/*2. 动画过程百分比*/
@keyframes name{
0%{}
20%{} /*从20%*/
50%{}
}
2. animation 属性值分析
| 值 | 描述 |
|---|---|
| animation-name | 选择器的名称 |
| animation-duration | 完成动画所花费的时间 |
| animation-timing-function | 动画速度效果 |
| animation-delay | 动画开始之前的延迟 |
| animation-iteration-count | 动画应该播放的次数 |
| animation-direction | 是否应该轮流反向播放动画 |
“animation-duration”：一般值为秒钟，如1s,2s…整个动画会在这个时间内完成。
“animation-timing-function”：
a：linear:匀速
b：ease:先慢后快(默认)
c：ease-in,ease-in-out:先慢后快
d：ease-out:先快后慢
“animation-delay”：动画第一次执行之前延迟时间，一般为秒钟。
“animation-iteration-count”：默认是动画执行一次，也可以填次数，可以使用"infinite"值，使动画循环执行。
“animation-direction”：
a：normal:正常值（默认）
b： reverse:反向
c：alternate-reverse:正反交替
3. demo
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS动画</title>
<link rel="stylesheet" href="./style.css">
<style>
.rect{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
animation-name: mymove;
animation-duration: 5s; /*5s一次*/
animation-timing-function:linear; /*匀速*/
animation-delay: 1s; /*延迟*/
animation-iteration-count:infinite; /*循环*/
animation-direction: normal; /*顺时针*/
}
/*动画*/
@keyframes mymove{
0% {top:0;left:10px;background-color: red;} /*开始的位置*/
25%{top:0;left:80%;background-color: blue;}
50%{top:80%;left:80%;background-color: violet;}
75%{top:80%;left:10px;background-color: yellow;}
100% {top:0;left:10px;background-color: red;} /*结束的位置*/
}
</style>
</head>
<body>
<div class="rect"></div>
</body>
</html>
