动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
语法格式:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
体会动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>体会动画</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
/* 动画名称自定义 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; */
animation: go 2s ease 0s infinite reverse running ; /* 引用动画 infinite无限循环*/
}
/* @keyframes 动画名称 {} 定义动画 */
@keyframes go {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多组动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多组动画</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
/* 动画名称自定义 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; */
animation: go 2s infinite ; /* 引用动画 infinite无限循环*/
/* margin: 50px auto; */
}
/* @keyframes 动画名称 {} 定义动画 */
@keyframes 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% { /* 100% 相当于结束 to */
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
小汽车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>奔跑的小汽车</title>
<style>
img {
animation: car 5s infinite; /* 引用动画 */
width: 100px;
}
@keyframes car { /* 定义动画 */
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(1000px,0,0);
}
51% {
/* 如果有多组变形 用空格隔开 */
transform: translate3d(1000px,0,0) rotateY(180deg);
}
99% {
transform: translate3d(0,0,0) rotateY(180deg);
}
100% {
transform: translate3d(0,0,0) ;
}
}
</style>
</head>
<body>
<div>
<img src="images/car.jpg" alt="">
</div>
</body>
</html>
无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
* {
margin: 0px;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 882px;
height: 86px;
border: 1px solid gray;
margin: 100px auto;
overflow: hidden;
}
nav li {
float: left;
}
nav ul {
width: 200%;
animation: moving 5s linear infinite; /* 引用动画 匀速运动 无限循环*/
}
nav:hover ul {
animation-play-state: paused; /* 鼠标经过暂停动画 */
}
@keyframes moving {
from {
transform: translate3d(0,0,0);
}
to {
transform: translate3d(-882px,0,0);
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="images/nav1.jpg" alt=""></li>
<li><img src="images/nav2.jpg" alt=""></li>
<li><img src="images/nav3.jpg" alt=""></li>
<li><img src="images/nav4.jpg" alt=""></li>
<li><img src="images/nav5.jpg" alt=""></li>
<li><img src="images/nav6.jpg" alt=""></li>
<li><img src="images/nav7.jpg" alt=""></li>
<li><img src="images/nav1.jpg" alt=""></li>
<li><img src="images/nav2.jpg" alt=""></li>
<li><img src="images/nav3.jpg" alt=""></li>
<li><img src="images/nav4.jpg" alt=""></li>
<li><img src="images/nav5.jpg" alt=""></li>
<li><img src="images/nav6.jpg" alt=""></li>
<li><img src="images/nav7.jpg" alt=""></li>
</ul>
</nav>
</body>
</html>
链接:https://pan.baidu.com/s/1gfpZX9ZUn_OFspLrmRS3kQ 提取码:jy1t