animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count: infinite; 无限循环播放
animation-play-state: paused; 暂停动画"
@keyframes规则和所有动画属性：
| 值 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 |
| inherit | 从父元素继承属性。 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
animation: go 2s ease 2 reverse ;/*这里是引用动画*/
/*动画名称go 是自定义的 2s 是完成动画需要花费的时间 ease运动曲线
0s 何时开始
2是播放次数，如果2改成infinite（无穷大），动画会无限循环
reverse从反方向运动，如果加了这个值，动画就会从600px的地方开始回到0，如果不加这个值，动画就会从0走到600px的地方去 alternate如果这里改成这个词的话，他会正向走到终点再从终点按规则走向起点*/
}
/*一般情况下，就用前两个，就给个动画名称和动画结束时间animation: go 2s*/
/*@keyframes 动画名称 {} 定义动画*/
@keyframes go { /*定义动画，go是自定义的动画名称*/
from { /*从哪里来*/
transform: translateX(0);
}
to { /*到哪里去*/
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
image.png
多组动画：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
animation: go 5s infinite; /*这里是引用动画*/
/*动画名称go 是自定义的 2s 是完成动画需要花费的时间*/
}
/*多组动画：*/
/*@keyframes 动画名称 {} 定义动画*/
@keyframes go { /*定义动画，go是自定义的动画名称*/
0% { /*从哪里来 起始位置，等价于from，百分比怎么设置，设置多少都可以自定义*/
transform: translate3d(0, 0, 0);
}
25% { /*到哪里去*/
transform: translate3d(800px, 0, 0);
}
50% {
transform: translate3d(800px, 400px, 0);
}
75% {
transform: translate3d(0, 400px, 0);
}
100% {
transform: translate3d(0, 0, 0); /*100%相当于结束，相当于to*/
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
image.png
案例：
小汽车
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 100px;
animation: car 5s infinite;/*引用动画 infinite无限循环*/
}
/*定义动画*/
@keyframes car {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(1000px, 0, 0);
}
51% {
transform: translate3d(1000px, 0, 0) rotateY(180deg);
/*如果有多组变形，都属于transform 那用空格隔开就好了*/
}
100% {
transform: translate3d(0, 0, 0) rotateY(180deg);
}
}
</style>
</head>
<body>
<div>
<img src="images/car.jpg" alt="">
</div>
</body>
</html>
image.png
案例:
无缝滚动的图片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 882px;
height: 86px;
border: 1px solid darkcyan;
margin: 100px auto;
overflow: hidden;
}
nav li {
float: left;
}
nav ul { /*同样的7张图，把他接起来成为14张在一列滚动，然后溢出的部分隐藏就行了，在这里因为盒子宽度是确定的，所以要设置200%，否则第二列图片会掉下去*/
width: 200%;
animation: moving 5s linear infinite;/*引用动画 linear匀速运动 infinite无限循环*/
}
/*定义动画*/
@keyframes moving {
from {
transform: translateX(0);
}
to {
transform: translateX(-882px);
}
}
nav:hover ul { /*鼠标经过 nav 里面的 ul 做以下效果*/
animation-play-state: paused;/*鼠标经过时，暂停播放动画*/
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="images/nav1.jpg" ></li>
<li><img src="images/nav2.jpg" ></li>
<li><img src="images/nav3.jpg" ></li>
<li><img src="images/nav4.jpg" ></li>
<li><img src="images/nav5.jpg" ></li>
<li><img src="images/nav6.jpg" ></li>
<li><img src="images/nav7.jpg" ></li>
<li><img src="images/nav1.jpg" ></li>
<li><img src="images/nav2.jpg" ></li>
<li><img src="images/nav3.jpg" ></li>
<li><img src="images/nav4.jpg" ></li>
<li><img src="images/nav5.jpg" ></li>
<li><img src="images/nav6.jpg" ></li>
<li><img src="images/nav7.jpg" ></li>
</ul>
</nav>
</body>
</html>
image.png
网友评论