css3 动画
动画
动画和过渡类似，都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时，才会触发
而动画可以自己触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧里设置了动画每一步的效果
@keyframes
@keyframes name {} 设置关键帧
可选值：
- from 表示动画的开始状态
- to 表示动画的结束状态
- % 将动画过程百分化，可以设置 n 个状态，0% 等于 from，100% 等于 to，50% 时间一半的状态
animation 属性
- animation-name
- animation-duration
- animation-delay
- animation-timing-function
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
animation-name
要对当前元素生效的关键帧的名字
animation-duration
一次动画的执行时间
animation-delay
动画开始前的延迟，默认为 0
animation-timing-function
和 transition 一样的 时间函数，默认为 ease
animation-iteration-count
动画执行的次数
可选值：
- n 次数
- infinity 无限次数
animation-direction
指定动画运行的方向
可选值：
- normal 默认值，从 from 向 to 运行，每次都是这样
- reverse 反向，从 to 向 from 运行，每次都是这样
- alternate 轮流交替，先从 from - to，再 to - from，反复如此
- alternate-reverse 反向轮流，先从 to - from，再 from - to，反复如此
animation-play-state
设置动画的执行状态
可选值：
- running 默认值 动画执行
- paused 动画暂停
这个属性用于控制动画的执行状态，比如 hover 时就执行，否则就暂停，等等
animation-fill-mode
动画的填充模式
可选值：
- none 默认值 动画执行完毕 元素回到原来的状态
- forwards 动画执行完毕 元素会停留在 动画结束 的状态
不一定会是 to 的状态，如是偶数次，又设置了 alternate 交替，那么结束时会是 form 的状态 - backwards 在动画延迟等待时，元素就会处于 动画开始 的状态，如果没有设置延迟，那么就没效果
和上面一样，如果设置了 reverse，那么动画一开始就是 to 的状态 - both 结合了 forwards 和 backwards，延迟等待元素处于 动画开始，动画结束后停留在 动画结束的状态
animation
和过渡 transition 一样可以简写，延迟时间 必须写在 执行时间 之后
.box2{
background-color: #bfa;
animation: test 2s 2 1s alternate-reverse both;
/* 执行test动画，一次2s完成，执行2次，延迟1s开始，反向交替执行，延迟等待元素处于 动画开始，动画结束后停留在 动画结束的状态 */
}
@keyframes test {
from{
margin-left: 0;
background-color: orange;
}
to{
background-color: red;
margin-left: 700px;
}
}
效果
练习
米兔
上次使用了过渡效果来使 米兔 动起来，详见 css3 过渡
这次，就用 animation 来实现，像这种把每张画都放在一张图，称作 sprite animation（精灵动画）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>米兔</title>
<style>
.mitu {
width: 132px;
height: 271px;
margin: 100px auto;
background-image: url("https://liwker.top/gitee/img/20210106145912.png");
background-position: 0 0;
animation-name: move;
/* 一个周期为 0.6s */
animation-duration: 0.6s;
/* 每3(n-1)步为一个周，但这里是移动的整张图，所以就是 n */
animation-timing-function: steps(4 ,end);
/* 动画执行无数次 */
animation-iteration-count: infinite;
/* 默认不开启动画 */
animation-play-state: paused;
}
.mitu:hover {
/* hover时 执行动画 */
animation-play-state: running;
}
@keyframes move {
from {
background-position: 0 0;
}
to {
/* 移动整张图片 */
background-position: -528px 0;
}
}
</style>
</head>
<body>
<div class="mitu"></div>
</body>
</html>
效果
奔跑的小男孩
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>runboy</title>
<style>
.runboy {
width: 256px;
height: 256px;
margin: 50px auto;
background-image: url("https://liwker.top/gitee/img/20210106165812.png");
background-position: 0 0;
animation: run 0.7s steps(6) infinite paused;
}
.runboy:hover {
/* 这里一定要用全称，因为简写里有默认值，会覆盖原设置 */
animation-play-state: running;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1536px 0;
}
}
</style>
</head>
<body>
<div class="runboy"></div>
</body>
</html>
效果
弹力小球
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小球</title>
<style>
body{
margin: 0;
padding: 0;
}
.box {
height: 500px;
margin: 50px 0;
border-bottom: 10px black solid;
/* 开启bfa，防止外边距重叠 */
overflow: hidden;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #bfa;
animation: play 4s ease-in forwards;
}
@keyframes play {
from {
margin-top: 0;
}
15%, 45%, 70%, 84%, 93%,to {
margin-top: 400px;
animation-timing-function: ease-out;
}
30% {
margin-top: 90px;
animation-timing-function: ease-in;
}
58% {
margin-top: 160px;
animation-timing-function: ease-in;
}
78% {
margin-top: 270px;
animation-timing-function: ease-in;
}
89% {
margin-top: 340px;
animation-timing-function: ease-in;
}
96% {
margin-top: 380px;
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<div class="box">
<div class="ball"></div>
</div>
</body>
</html>
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
height: 500px;
border-bottom: 10px black solid;
margin: 50px auto;
overflow: hidden;
}
.outer div{
float: left;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #bfa;
animation: ball .5s forwards linear infinite alternate;
}
div.box2{
background-color: orange;
animation-delay: .1s;
}
div.box3{
background-color: yellow;
animation-delay: .2s;
}
div.box4{
background-color: yellowgreen;
animation-delay: .3s;
}
div.box5{
background-color: blue;
animation-delay: .4s;
}
div.box6{
background-color: pink;
animation-delay: .5s;
}
div.box7{
background-color: tomato;
animation-delay: .6s;
}
div.box8{
background-color: skyblue;
animation-delay: .7s;
}
div.box9{
background-color: chocolate;
animation-delay: .8s;
}
/* 创建小球下落的动画 */
@keyframes ball {
from{
margin-top: 0;
}
to{
margin-top: 400px;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>
