开发者学堂课程【前端开发CSS基础：CSS动画 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4270
CSS动画
内容简介：
一、 动画简介
二、 动画特效，动画名称，持续时间的代码演示
三、 其他属性的代码演示
四、 演示总结
一、动画简介
1.通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript 动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于 0% 和100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
属性 |
描述 |
animation |
复合属性。检索或设置对象所应用的动画特效 |
animation-name |
检索或设置对象所应用的动画名称 |
animation-duration |
检索或设置对象动画的持续时间 |
animation-timing-function |
检索或设置对象动画的过渡类型 |
animation-delay |
检索或设置对象动画延迟的时间 |
animation-iteration-count |
检索或设置对象动画的循环次数，infinite：无限循环 |
animation-direction |
检索或设置对象动画在循环中是否反向运动，normal：正常方向；alternate：正常与反向交替 |
二、动画特效，动画名称，持续时间的代码演示
新建一个项目 HTML File，并命名为 animation
（1）代码一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
width:100px;
height:100px;
background-color: blueviolet ;
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
代码一执行效果为：
（2）代码二：
为代码一的一个 div 添加动画效果用到 from...to...
注意：再加入动画效果的时候要注意添加一个 @keyframes 规则
@keyframes cartoon{
from {
background-color: blueviolet ;
}
to {
background-color: deepskyblue;
}
}
同时，要添加必要的属性，这里是添加的动画名称以及动画的执行时间
animation-name：cartoon；
animation-duration：3s；
<!DOCTYPE html>
<html lang="en">
<head>
width:100px;
height:100px;
background-color: blueviolet ;
animation-name：cartoon；
animation-duration：3s；
}
@keyframes cartoon{
from {
background-color: blueviolet ;
}
to {
background-color: deepskyblue;
}
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
代码二执行效果为：
此时可以得到一个从紫色到深蓝色的动画效果。
(3) 代码三：
为代码一的一个 div 添加动画效果用到百分比形式
注意：再加入动画效果的时候要注意添加一个 @keyframes 规则
@keyframes cartoon{
from {
background-color: blueviolet ;
}
to {
background-color: deepskyblue;
}
75% {
background-color:pink;
}
100% {
background-color:blueviolet;
}
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
代码三执行效果为：
会得到一个从紫色，绿色，蓝色，粉色，紫色的动态变化效果。
在实际的运用中通常会采用百分比的形式进行描写，可以改变多次。不采用 from...to...,，因为它在控制过程中只能控制一次改变
(4) 代码四：
可以不光改变它的属性，也可以改变上节课中的2D变换，为他的这个给过程添加动态效果
0% transform：totate（0deg）
25% transform：totate（90deg）
50% transform：totate（180deg）
75% transform：totate（270deg）
100% transform：totate（360deg）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
width:100px;
height:100px;
background-color: blueviolet ;
animation-name：cartoon；
animation-duration：5s；
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
代码四执行效果为：
可以得到一个从紫色，绿色，蓝色，粉色，紫色的动态变化效果。
并且每改变一种颜色，就会旋转90度，下图为运行到变为蓝色时的截图。
(5) 代码五：
可以设置弹入与弹出：
0% opacity: 1;
25% opacity: 0.8;
50% opacity: 0.5;
75% opacity: 0.8;
100% opacity: 1;
<!DOCTYPE html>
100% {
opacity: 1;
transform：totate（360deg）
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
代码五执行效果为
会在运行效果中看到透明度的改变，所以动画效果可以将所需要的效果添加进去。
三、 其他属性的代码演示
（1）过渡类型也分为线性、平滑、由慢到快、由快到慢以及由慢到快再到慢取值，这些是常用的的取值类型
设置为线性过渡
animation-timing-function:linear;
代码一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
width:100px;
height:100px;
background-color: blueviolet ;
animation-name：cartoon；
animation-duration：5s；
animation-timing-function:linear;
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
运行效果为：
就可以观察到一个均匀变化的动态效果。
（2）要等待的时间才执行动画效果
animation-delay：1s；
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
width:100px;
height:100px;
background-color: blueviolet ;
animation-name：cartoon；
animation-duration：5s；
animation-timing-function: ease-in-out;
animation-delay：1s；
}
100% {
opacity: 1;
transform：totate（360deg）
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
运行效果为;
可以得到每一个在变化过程中有一个1s的时间间隔。
（3）设置动画的循环次数，就是规定动画的执行次数
一般是默认执行一次，在这里以执行2次为示范。
animation-iteration-count: 2;
代码3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
width:100px;
height:100px;
background-color: blueviolet ;
animation-name：cartoon；
animation-duration：5s；
animation-timing-function: ease-in-out;
animation-delay：1s；
}
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
运行效果：
可以观察到动画在运行两次之后，不再发生变化。
若需要无限循环，则需要将代码 animation-itreation-count：2s；改为animation-itreation-count：infinite；
（4）正常运行以及反向运行
正常运行 animation-direction：normal；
反向运行 animation-direction：alternate；
代码4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
}
@keyframes cartoon{
0% {
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
运行效果：
Alternate: 先正向，在反向进行的动画效果
四、演示总结
所有属性的单个语句最后可以整合为一句
animation：cartoon 2s ease-in-out 1s indinite alternate;
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
alternate;
}
@keyframes cartoon{
0% {
opacity: 1;
transform：totate（0deg）;
background-color: blueviolet ;
}
}
</style>
</head>
<body>
<div class="first">
效果
</div>
</body>
</html>
运行效果：
可以看到延迟执行一秒正向反向交替的动画效果。
