本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1. animation-name
/* 属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列 */
- none
特殊关键字，表示无关键帧。
- keyframename
标识动画的字符串
示例
animation-name: move;
@keyframes move{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
2. animation-duration
/* 指定一个动画周期的时长 */
- 0s，表示无动画。
- 值 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
# Notes: 负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s
3. animation-timing-function
/* 定义CSS动画在每一动画周期中执行的节奏 */
- 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。
动画的默认效果：由慢变快再变慢
linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
steps(n,[start|end])
传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
默认值为 end。
4. animation-delay
/* 定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴) */
- <time> 从动画样式应用到元素上到元素开始执行动画的时间差。
该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效
5. animation-iteration-count
/* 定义了动画执行的次数（属于动画内的范畴） */
- infinite 无限循环播放动画.
- <number> 动画播放的次数 不可为负值.
6. animation-direction
/* 定义了动画执行的方向 */
- normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始,默认属性。
- alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，
比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
- reverse 反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse 反向交替， 反向开始交替
7. animation-fill-mode
/* 属于动画外的范畴，定义动画在动画外的状态 */
1.animation-fill-mode: none
2.animation-fill-mode: backwards
3.animation-fill-mode: forwards
4.animation-fill-mode: both
/*
* backwards：
* from之前的状态与form的状态保持一致
* forwards：
* to之后的状态与to的状态保持一致
* both：
* backwards + forwards
*/
8. animation-play-state
/* 定义了动画执行的运行和暂停 */
- running
当前动画正在运行。
- paused
当前动画以被停止。
9. 关键帧 ( @keyframes )
# 语法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
# 参数：
- animiationName:必写项，定义动画的名称
- keyframes-selector：必写项，动画持续时间的百分比
from：0%
to：100%
- css-style：css声明
10. animation
# Notes: 在每个动画定义中，顺序很重要可以被解析为时间的第一个值被分配给animation-duration,
第二个分配给 animation-delay。
11. 示例
可直接复制代码，看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
overflow: hidden;
}
.container {
width: 1100px;
height: 800px;
box-sizing: content-box;
border: 1px solid deeppink;
border-radius: 10px;
margin: 10px auto;
padding: 20px;
}
.title {
width: 100%;
height: 60px;
margin-left: 20px;
}
.title .title-btn {
width: 180px;
height: 40px;
background-color: #cc0000;
border-radius: 5px;
color: white;
font-size: 20px;
line-height: 40px;
text-align: center;
position: relative;
}
.title .title-btn:after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-left-color: #cc0000;
position: absolute;
left: 100%;
top: 16px;
}
.item {
position: relative;
width: 180px;
height: 180px;
background-color: #f3f3f3;
border-radius: 6px;
float: left;
margin: 20px;
}
.common-div-size {
width: 100px;
height: 100px;
margin: 18px auto;
background-color: #1A1E23;
}
.common-btn {
width: 100px;
height: 28px;
position: absolute;
left: calc(50% - 50px);
bottom: 10px;
color: #f90;
border: 1px #f90 solid;
font-size: 18px;
text-align: center;
line-height: 28px;
border-radius: 4px;
cursor: pointer;
}
@keyframes scle-move-box1 {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes scle-move-box2 {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@keyframes scle-move-box3 {
from {
transform: scale(.3);
}
to {
transform: scale(1);
}
}
.container .item:nth-of-type(5) {
perspective: 100px;
transform-style: preserve-3d;
}
@keyframes scle-move-box4 {
from {
transform: translateZ(600px);
}
to {
transform: translateZ(0);
}
}
@keyframes scle-move-box5 {
from {
transform: scale(.3) rotate(0);
}
to {
transform: scale(1) rotate(360deg);
}
}
.box-6, .box-7 {
border-radius: 50%;
}
@keyframes scle-move-box6 {
from {
transform: translateY(-600px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes scle-move-box7 {
0% {
transform: translateY(-600px);
animation-timing-function: ease-in;
}
30% {
transform: translateY(0);
animation-timing-function: ease-out;
}
50% {
transform: translateY(-90px);
animation-timing-function: ease-in;
}
65% {
transform: translateY(0);
animation-timing-function: ease-out;
}
80% {
transform: translateY(-50px);
animation-timing-function: ease-in;
}
90% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
93% {
transform: translateY(-28px);
animation-timing-function: ease-in;
}
96% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
99% {
transform: translateY(-16px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<div class="title-btn">animation</div>
</div>
<div class="item">
<div class="box-1 common-div-size"></div>
<div onclick="clickBtn(1)" class="btn-1 common-btn">start</div>
</div>
<div class="item">
<div class="box-2 common-div-size"></div>
<div onclick="clickBtn(2)" class="btn-2 common-btn">start</div>
</div>
<div class="item">
<div class="box-3 common-div-size"></div>
<div onclick="clickBtn(3)" class="btn-3 common-btn">start</div>
</div>
<div class="item">
<div class="box-4 common-div-size"></div>
<div onclick="clickBtn(4)" class="btn-4 common-btn">start</div>
</div>
<div class="item">
<div class="box-5 common-div-size"></div>
<div onclick="clickBtn(5)" class="btn-5 common-btn">start</div>
</div>
<div class="item">
<div class="box-6 common-div-size"></div>
<div onclick="clickBtn(6)" class="btn-6 common-btn">start</div>
</div>
<div class="item">
<div class="box-7 common-div-size"></div>
<div onclick="clickBtn(7)" class="btn-7 common-btn">start</div>
</div>
<div class="item">
<div class="box-8 common-div-size"></div>
<div onclick="clickBtn(8)" class="btn-8 common-btn">start</div>
</div>
<div class="item">
<div class="box-9 common-div-size"></div>
<div onclick="clickBtn(9)" class="btn-9 common-btn">start</div>
</div>
<div class="item">
<div class="box-10 common-div-size"></div>
<div onclick="clickBtn(10)" class="btn-10 common-btn">start</div>
</div>
</div>
<script>
function clickBtn(index) {
// 清除样式
let allDiv = document.querySelectorAll('.common-div-size');
for (let i = 0; i < allDiv.length; i++) {
allDiv[i].style.removeProperty('animation');
}
setTimeout(function () {
switch (index) {
case 1:
let box1 = document.querySelector('.box-' + index);
box1.style.animation = `scle-move-box${index} 0.6s both`;
break;
case 2:
let box2 = document.querySelector('.box-' + index);
box2.style.animation = `scle-move-box${index} 0.6s both`;
break;
case 3:
let box3 = document.querySelector('.box-' + index);
box3.style.animation = `scle-move-box${index} 0.8s both`;
break;
case 4:
let box4 = document.querySelector('.box-' + index);
box4.style.animation = `scle-move-box${index} 0.4s both`;
break;
case 5:
let box5 = document.querySelector('.box-' + index);
box5.style.animation = `scle-move-box${index} 0.8s both`;
break;
case 6:
let box6 = document.querySelector('.box-' + index);
box6.style.animation = `scle-move-box${index} .7s both`;
break;
case 7:
let box7 = document.querySelector('.box-' + index);
box7.style.animation = `scle-move-box${index} .7s both`;
break;
}
}, 1)
}
</script>
</body>
</html>
