动画
动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画。通常用来实现复杂的动画效果
相比较过度，动画可以实现更多变化，更多控制，连续自动播放等效果。
1.1动画的基本使用
1.先定义动画
2.在使用(调用)动画
定义动画
@keyframes 动画名称 { 0% { } /* 节点 */ 100% { } }
动画序列:
0%是动画的开始 100%是动画的结束。这样的规则就是动画序列
在@keyframes中规定某项CSS样式 就能创建有当前样式逐渐改变为信阳市的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.
使用百分比来规定变化发生的时间,或用关键词"from"和"to" 等同于0% 和 100%
代码示例：
<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>动画</title> <style> /* 界面一打开 一个盒子就从左边走到右边 */ /* 定义动画 */ @keyframes move { /* 开始装填 */ 0% { transform: translateX(0px); } /* 节点 结束状态*/ 100% { transform: translateX(1000px); } } div { width: 200px; height: 200px; background-color: pink; /* 调用动画 */ /* 动画名称 */ animation-name: move; /* 持续时间 */ animation-duration: 2s ; } /* */ </style> </head> <body> <div></div> </body> </html>
代码示例2：
<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>Document</title> <style> /* 可以做多个状态的变化 keyframes 关键帧*/ /* 里面的百分比要是整数 */ /* 百分比是总的时间的划分 */ @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(200px, 0); } 50% { transform: translate(200px, 200px); } 75% { transform: translate(0, 200px); } 100% { transform: translate(0, 0); } } div { width: 50px; height: 50px; background-color: pink; animation-name: move; animation-duration: 3s; } </style> </head> <body> <div></div> </body> </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>动画属性</title> <!-- @keyframes 定义动画 --> <!-- animation:所有动画属性的简写属性 除了animation-play-state属性 --> <!-- animation-name: 规定@keyframes动画的名称 必须的--> <!-- animation-duration 动画时间 默认是0 必须的 --> <!-- animation-timing-function 规定动画的速度曲线 默认是ease --> <!-- animation-delay 动画延迟时间 过多少时间动画开始 --> <!-- animation-iteration-count 规定动画被播放的次数 默认是1 还有infinite --> <!-- animation-direction:规定动画是否在下一周期逆向播放 默认是normal altemate 逆向播放 --> <!-- animation-play-state 规定动画是否正在运行或暂停 默认是running 还有pause --> <!-- animation-fill-mode 规定动画结束后的状态 保持forwards 回到原来的状态 backwards--> <style> @keyframes move { 0% { transform: translateX(0, 0); } 100% { transform: translate(1000px, 0); } } div { width: 100px; height: 100px; background-color: pink; /* 动画名称 */ animation-name: move; /* 持续时间 */ animation-duration: 1s; /* 运动曲线 */ animation-timing-function: linear; /* 延迟 */ animation-delay: 1s; /* 动画次数 infinite 无限*/ /* animation-iteration-count: infinite; */ /* 是否逆向播放 默认normal alternate 逆向播放 */ animation-direction: alternate; /* 动画播放一次后 是否回到起始状态 backwards回到起始状态 forwards停留在动画结束状态 */ animation-fill-mode: forwards; } div:hover { /* 鼠标经过div 让div暂停动画 鼠标离开就继续动画*/ animation-play-state: paused; } </style> </head> <body> <div></div> </body> </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>动画属性</title> <!-- @keyframes 定义动画 --> <!-- animation:所有动画属性的简写属性 除了animation-play-state属性 --> <!-- animation-name: 规定@keyframes动画的名称 必须的--> <!-- animation-duration 动画时间 默认是0 必须的 --> <!-- animation-timing-function 规定动画的速度曲线 默认是ease --> <!-- animation-delay 动画延迟时间 过多少时间动画开始 --> <!-- animation-iteration-count 规定动画被播放的次数 默认是1 还有infinite --> <!-- animation-direction:规定动画是否在下一周期逆向播放 默认是normal altemate 逆向播放 --> <!-- animation-play-state 规定动画是否正在运行或暂停 默认是running 还有pause --> <!-- animation-fill-mode 规定动画结束后的状态 保持forwards 回到原来的状态 backwards--> <style> @keyframes move { 0% { transform: translateX(0, 0); } 100% { transform: translate(1000px, 0); } } div { width: 100px; height: 100px; background-color: pink; /* 动画名称 */ /* animation-name: move; */ /* 持续时间 */ /* animation-duration: 1s; */ /* 运动曲线 */ /* animation-timing-function: linear; */ /* 延迟 */ /* animation-delay: 1s; */ /* 动画次数 infinite 无限*/ /* animation-iteration-count: infinite; */ /* 是否逆向播放 默认normal alternate 逆向播放 */ /* animation-direction: alternate; */ /* 动画播放一次后 是否回到起始状态 backwards回到起始状态 forwards停留在动画结束状态 */ /* animation-fill-mode: forwards; */ } /* 上面的所有属性等效于 */ div { /* 顺序 动画名称 动画时间 运动轨迹 延迟时间 重复次数 动画是都逆向 动画状态 名字和时间一定不能省略*/ animation: move 1s linear 1s infinite alternate; } div:hover { /* 鼠标经过div 让div暂停动画 鼠标离开就继续动画*/ animation-play-state: paused; } </style> </head> <body> <div></div> </body> </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>动画简写</title> <style> /* animation: 动画名称 持续时间 运动曲线 延迟时间 播放次数 是否反方向 动画起始或者结束的状态 */ body { background-color: #333; } .map { position: relative; margin: 0 auto; width: 747px; height: 617px; background: url(../img/map.png) no-repeat; } .city { position: absolute; top: 228px; right: 193px; color: #fff; } .dotted { width: 8px; height: 8px; background-color: #0099ff; border-radius: 50%; } div[class^="pulse"] { /* 保证小波纹水平垂直居中 放大之后中心向四周发散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px #009dfd; animation: pulse 1.4s linear infinite; } div[class$="2"] { animation-delay: 0.4s; } div[class$="3"] { animation-delay: 0.8s; } @keyframes pulse { 0% {} 70% { width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"> </div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>
速度曲线细节(animation-timing-function)
<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>Document</title> <style> /* animation-timing-function 属性 */ /* linear 匀速 */ /* ease 动画低速开始 然后加快 在结束前变慢*/ /* ease-in 动画低速开始 */ /* ease-out 动画低速结束 */ /* ease-in-out 低速开始低速结束*/ /* steps() 指定了时间函数中的间隔数量(步长) */ div { width: 0; font-size: 20px; background-color: pink; /* 文字一行显示 */ white-space: nowrap; overflow: hidden; /* text-overflow: ellipsis; */ /* 分步长来走 分几步完成动画 分十步 每次走一步*/ animation: move 2s steps(13) forwards; } @keyframes move { 0% { width: 0; } 100% { width: 250px; } } </style> </head> <body> <div>世纪佳缘-程序员的梦想佳地</div> </body> </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>Document</title> <style> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(../img/bear.png); /* 元素可以添加多个动画 用逗号分隔 */ animation: bear 1s steps(8) infinite, move 2s linear forwards; } @keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translateX(-50%); } } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } </style> </head> <body> <div> </div> </body> </html>