目录
示例：太极旋转
动画（animation）：是CSS3中具有颠覆性的特征之一，可通过设置多个结点来精确控制一个或一组动画，用来实现复杂的动画效果。
制作动画分为两步：
定义动画：
使用/调用动画：
用keyframes定义动画：
<style>
@keyframes move{
0%{
transform: translate(0px);
}
100%{
transform: translate(100px);
}
.div1{
animation-name:move;/*需要执行的动画的名字*/
animation-duration: 3s;/*所需要的时间*/
animation-iteration-count: infinite;/* 执行次数*/
}
</style>动画常用属性：
动画序列：
1.可以做多个状态的变化
2.里面的百分比必须是整数
3.里面的百分比就是总的时间的划分
根据百分比状态确定实现什么动画：
@keyframes move{
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(100px,0px);
}
50%{
transform: translate(100px,100px);
}
75%{
transform: translate(0px,100px);
}
100%{
transform: translate(0,0);
}
}transition属性：
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
动画简写属性：
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
示例：
太极旋转
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
from{
transform: rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
body {
background-color: #adadad;/*设置背景色*/
}
div{
animation-duration:0.1ms;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#yinyang {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(
to bottom,
#ffffff 0%,
#ffffff 50%,
#000000 50%,
#000000 100%
);
position: relative;
margin: 100px auto;
}
#yinyang::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 40px solid black;/*左侧黑球套白点*/
background-color: white;
left: 0;
top: 50px;
}
#yinyang::after {
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 40px solid white;/*右侧白球套黑点*/
background-color: black;
right: 0;
top: 50px;
}
</style>
</head>
<body>
<div id="yinyang"></div>
</body>
</html>
