2D动画和3D动画详细版（一些样式建议用图片才能看出来）-阿南达文事网

2D动画和3D动画详细版（一些样式建议用图片才能看出来）

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 轴：垂直屏幕 -- **注意：往外边的是正值，往里面的是负值**