1、定义语法@keyframes格式
（只有这个可以让它动起来，里面可以加属性）
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}@keyframes是动画必须加的css样式，0%是刚加载的时候触发，100%是加载完成后触发，中间可以加0%~100%他们只是加载到一定百分比后触发
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%
2、下面css和html标签的代码可以参考，下面的写的animation属性复制就可以执行但是要配合我写的样式和标签（相当于效果了）
css的样式
.dox{
width: 1000px;
border: 1px solid;
height: 500px;
}
.a{
width: 100px;
height: 100px;
background-color: red;
}html的标签
<div class="dox">
<div class="a">动画</div>
</div>3、animation属性
animation:是在要实现动画的标签上加
（1）animation-name是动画名称给要实现动画的标签添加一个名称
给要过度的动画起一个名字 animation-name:名字;
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（2）animation-duration是动画的过度时间单位是s（动画要花费的时长）
过度动画要花费的时间 3s就是3秒
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒 */
animation-duration: 3s;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（3）animation-timing-function是动画的执行速度值有：
动画速度曲线属性有ease由快到慢(默认)linear匀速，ease-in由慢到快，ease-in-out慢快慢，ease-in-out动画以底速度开始到结束，steps()指定了时间函数中的间隔数量(步数)
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒 */
animation-duration: 3s;
/* 动画执行的速度 */
/* 动画速度曲线属性有ease由快到慢(默认),
linear匀速,ease-in由慢到快
ease-in-out慢快慢
ease-in-out动画以底速度开始到结束
steps()指定了时间函数中的间隔数量(步数) */
animation-timing-function: ease;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（4） animation-timing-function: steps(2)； steps里面的2:代表动画执行的步数
动画执行步数，steps里面的2:代表动画执行的步数(每个阶段都会执行比如0%-25%会执行两次第一次是12.5%第二次是25%)
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒 */
animation-duration: 3s;
/* 动画执行步数，steps里面的2:代表动画执行的步数(每个阶段都会执行比如0%-25%会执行两次第一次是12.5%第二次是25%) */
animation-timing-function: steps(2)；
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（5）animation-delay是延迟动画执行：动画等待多长时间执行（单位s）
延迟过度动画执行时间 2s就是2秒延迟2秒在执行动画
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒执行完动画 */
animation-duration: 3s;
/* 延迟过度动画执行时间 2s就是2秒延迟2秒在执行动画 */
animation-delay:2S;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（6）animation-iteration-count: infinite; 规定动画播放次数
animation-iteration-count: infinite;规定动画播放次数 infinite: 无限循环 默认1 可以是数值 animation-iteration-count: 2;就是循环2次
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒执行完动画 */
animation-duration: 3s;
/* 延迟过度动画执行时间 2s就是2秒延迟2秒在执行动画 */
/* animation-delay:2S; */
/* 动画执行次数 infinite是无限循环，也可以填写数字2表示循环两次 */
/* animation-iteration-count: 2; 填写数字2表示循环两次*/
animation-iteration-count: infinite;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（7）animation-direction: alternate; 是否逆行播放可以搭配播放次数
alternate不逆行播放（默认），alternate-reverse逆序播放动画
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒执行完动画 */
animation-duration: 3s;
/* 延迟过度动画执行时间 2s就是2秒延迟2秒在执行动画 */
/* animation-delay:2S; */
/* 动画执行次数 infinite是无限循环，也可以填写数字2表示循环两次 */
/* animation-iteration-count: 2; 填写数字2表示循环两次*/
/* animation-iteration-count: infinite; */
/* 逆序播放，是否逆行播放可以搭配播放次数 */
/* 不逆向播放 */
/* animation-direction: alternate; */
/* 逆序播放 */
animation-direction:alternate-reverse;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（8）animation-fill-mode: forwards; 盒子动画结束后，停在结束位置
（9） animation-play-state: paused`; 暂停动画，规定动画是否暂停或者播放
animation-play-state: paused`; 暂停动画，规定动画是否暂停或者播放，经常和鼠标经过等其他配合，使用简写属性里面不包含
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒执行完动画 */
animation-duration: 3s;
/* 延迟过度动画执行时间 2s就是2秒延迟2秒在执行动画 */
/* animation-delay:2S; */
/* 动画执行次数 infinite是无限循环，也可以填写数字2表示循环两次 */
/* animation-iteration-count: 2; 填写数字2表示循环两次*/
/* animation-iteration-count: infinite; */
/* 逆序播放，是否逆行播放可以搭配播放次数 */
/* 不逆向播放 */
/* animation-direction: alternate; */
/* 逆序播放 */
animation-direction:alternate-reverse;
}
/* hover是鼠标滑动触发 */
.a:hover{
/* 暂停动画，规定动画是否暂停或者播放 paused是暂停播放*/
/* 鼠标滑过暂停动画 */
animation-play-state: paused
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}（10）简写方式
简写方式：
1、animation: 动画名称 2s linear;
前面2个属性：动画名称 持续时间 一定要写
2、animation: 动画名称 duration timing-function delay iteration-count direction fill-mode
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 起始与结束状态
3、animation: move 2s ease 1s infinite ;
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 ；
4、其他属性
1、标签transition的属性：
多个简写的方式为transition:动画名称1 1s, 动画名称2 2s,用逗号隔开
同时使用多个转换，其格式为 `transform: translate() rotate() scale()`
transition-property: all 时间s;
要过渡的属性（all代表所有属性，还可以是宽或高） [ˈprɒpəti] 所有的
transition-duration: 1s; 过度花费的时间
transition-delay: 1s; 动画延时的时间
transition-timing-function: ease; 动画速度曲线属性有ease由快到慢(默认)，linear匀速，ease-in由慢到快，ease-in-out慢快慢，ease-in-out动画以底速度开始到结束，steps()指定了时间函数中的间隔数量(步数)
2、标签transform的属性：（x就是左右，Y就是上下）
（1）transform: rotate(度数); （旋转这个建议用图片更能看出效果）
transform: rotate(90deg); 旋转,单位是：deg，角度为正时，顺时针，角度为负时，逆时针
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒 */
animation-duration: 3s;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: rotate(0deg)} /* 动画开始的位置 */
25%{transform: rotate(90deg)} /* 动画执行到25%的位置 */
50%{transform: rotate(180deg)} /* 动画执行到50%的的位置 */
75%{transform: rotate(240deg)} /* 动画执行到75%的的位置 */
100%{transform: rotate(360deg)} /* 动画执行完的位置 */
}（2）transform-origin: x y; 设置元素旋转中心点, x 和 y 用空格隔开还可以给 x y ，设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center` 或 50px 50px)
transform-origin: x y; 设置元素旋转中心点, x 和 y 用空格隔开还可以给 x y ，设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center` 或 50px 50px)
（3）transform: scale(n, m); 按比例缩放，可以设置转换中心点缩放默认以中心点缩放，而且不影响其他盒子
transform: scale(n, m); 按比例缩放，可以设置转换中心点缩放默认以中心点缩放，而且不影响其他盒子
（4）transform: translate(x, y); 移动，x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔
transform: translate(x, y); 移动，x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔
.a{
width: 100px;
height: 100px;
background-color: red;
/* 给要过度的动画起一个名字 animation-name:名字;*/
animation-name:name;
/* 过度动画要花费的时间 3s就是3秒 */
animation-duration: 3s;
}
/* name是*animation-name里面的name */
@keyframes name{
0%{transform: translate(0px)} /* 动画开始的位置 */
25%{transform: translate(500px)} /* 动画执行到25%的位置 */
50%{transform: translate(500px,500px)} /* 动画执行到50%的的位置 */
75%{transform: translate(0px, 500px)} /* 动画执行到75%的的位置 */
100%{transform: translate(0px)} /* 动画执行完的位置 */
}4、3D动画和2D写法差不多不用我多写了吧，不会可以参考2D
3D （动画属性是通用的也可以简写）（3D一般都用定位写的）（3D是在动画的基础加上新加移动的属性）
（1）开启3D必须加下面的属性，这属性基本上都是给父元素加的
transform-style: flat; 代表子元素不开启 3D 立体空间，默认的不开启，代码写给父级，但是影响的是子盒子
transform-style: preserve-3d; 子元素开启3D立体空间，代码写给父级，但是影响的是子盒子
perspective:"500px" 透视(单位px)，如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)，透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离**透视需要写在被视察元素的父盒子上面**
（2）标签transform的属性：
transform: translateX(100px); 仅仅是在 x 轴上移动
transform: translateY(100px)： 仅仅是在 y 轴上移动
transform: translateZ(100px)： 仅仅是在 z 轴上移动
transform: translate3d(x, y, z)： 其中x、y、z 分别指要移动的轴的方向的距离，注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
transform: rotateX(45deg); 沿着 x 轴正方向旋转 45 度(X正数是往右走，负数是往左)
transform: rotateY(45deg)； 沿着 y 轴正方向旋转 45 度(Y正数是往下走，负数是往上)
transform: rotateZ(45deg)` 沿着 z 轴正方向旋转 45 度(Z正数是往前走，负数是往后)
transform: rotate3d(1, 1, 1, 45deg)` 沿着自定义(x, y, z, deg)轴旋转 45 deg 为角度
0%{ transform: rotateX(0deg);}
30%{ transform: rotateX(90deg);}
60%{ transform: rotateX(180deg);}
100%{ transform: rotateX(360deg);}（3）维坐标系
- x 轴：水平向右 -- **注意：x 轴右边是正值，左边是负值**
- y 轴：垂直向下 -- **注意：y 轴下面是正值，上面是负值**
- z 轴：垂直屏幕 -- **注意：往外边的是正值，往里面的是负值**
2179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
