HTML动画 - 技术栈

前言：

1、什么是css动画：使用css技术来控制页面元素css属性的变化

2、css动画优势：不需要用js也能写，比较流畅，由浏览器去执行动画，减少代码量，性能比较高

3、一般兼容到ie10以上浏览器（一般没太大问题）

过渡

过渡的理解

过渡（transition）[træn'siʒən]

-通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡

-需要在某种条件下触发，例如hover、active、focus情况下

-一次性的效果，不能循环，只能做简单的动画

-只有两帧，设置动画初始值和结束值

-IE10开始兼容，移动端兼容良好

过渡的4个属性

|----|-------------------------------------|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 属性 | 意义 | 备注 |
| 1 | transition-property ['prɔpəti] | 哪些属性要过渡（选填） | 1. 没有属性获得过渡效果 1. 所有属性都参与过渡 默认值 1. 自定义应用过渡效果，一个或多个，用逗号隔开注意： 1、所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity,颜色等 2、从一个有效数值向另一个有效数值进行过渡 |
| 2 | transition-duration [djuə'reiʃən] | 指定过渡效果的持续时间（必填） | 时间的单位：s和ms 1s=1000ms |
| 3 | transition-timing-function | 过渡变化曲线（缓动效果）（选填） | *ease [i:z] 默认值，慢速开始，先加速，然后再减速 *linear 匀速运动 ease-in 先慢后快加速运动 ease-out 先快后慢减速运动 ease-in-out 以慢速开始和结束的过渡效果 *steps()分布执行过渡效果 cubic-bezier(n,n,n,n)立方贝塞尔曲线函数，值是0-1之间的数值 |
| 4 | transition-delay | 过渡效果的延迟，等待一段时间后执行过渡（选填） | 时间的单位：s和ms 1s=1000ms 默认是0 |
| 5 | transition | 同时设置过渡相关的所有属性（选填，过渡时间是必写） | 只有一个要求，如果要写延迟，则两个时间中,第一个写过渡时间，第二个写延迟时间空格隔开即可 |

自定义动画

动画的理解

动画和过渡类似，两者的区别

过渡必须有触发条件，例如hover，acitve时，动画可以自动触发动画
过渡只有开始和结束帧，动画可以设置复杂过程
过渡只能执行一次，动画可以自定义执行次数

第一步：先要设置一个关键帧，关键帧设置了动画每一个步骤

制定关键帧用的是@keyframes属性，指定关键帧主要有两种方法：

方法一：

@keyframes 关键帧名称{

from{初始状态属性}

to{结束状态属性}}

方法二：

@keyframes 关键帧名称{

0%{初始状态属性}

50%（中间还可以再添加关键帧）

100%{结束状态属性

}

注意：

1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写，默认也是原始设置

2、可以同时设置关键帧，用逗号（,）隔开就行

javascript 复制代码

 @keyframes text {

        /* from表示动画开始位置  也可以使用0%*/

        from {

          margin-left: 0;

        }

        /* to动画的结束位置 也可以使用100%*/

        to {

          margin-left: 500px;

        }

第二步调用关键帧

动画属性

|----|-------------------------------------------|-----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 属性 | 意义 | 备注 |
| 1 | animation-name | 绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画(必填) | 设置动画的名字，和@keyframs相对应，可以设置多个动画，逗号隔开，应用多个动画 |
| 2 | animation-duration | 动画的完成时间，告诉系统动画持续的时长（必填） | 时间单位：s ms |
| 3 | animation-timing-function | 设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型） | *ease [i:z] 默认值，慢速开始，先加速，然后再减速 *linear 匀速运动 ease-in 先慢后快加速运动 ease-out 先快后慢减速运动 ease-in-out 以慢速开始和结束的过渡效果 *steps()分布执行过渡效果 cubic-bezier(n,n,n,n)立方贝塞尔曲线函数，值是0-1之间的数值 |
| 4 | animation-delay | 动画在启动前的延迟间隔 | 默认0s |
| 5 | animation-iteration-count [,itə'reiʃən] | 动画的播放次数，告诉系统动画需要执行几次 | n 定义动画播放n次 infinite无限次往返执行 |
| 6 | animation-direction | 指定是否应给轮流反向播放动画 | normal 默认值：从from向to运行，每次都是这样 reverse 从to到from运行，每次都是这样 * alternate 从from向to运行，重复执行动画时反向执行 alternate-reverse 从to向from运行，重复执行动画时反向执行 |
| 7 | animation-fill-mode | 规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式 | none默认值动画执行完毕元素回到原来的位置 * forwards 动画执行完毕，会停止在动画结束的位置 backwards 动画延时等待时，元素就会处于开始位置 both 结合了forwards和backwards的特点 |
| 8 | animation-play-state | 告诉系统当前动画是否需要暂停 | running 默认值动画执行 paused 动画暂停 |
| 9 | animation | 简写，可以写以上任意属性的可选值 | animation:关键帧的名称动画持续的时间运动状态(linear(匀速)) 动画延迟的时间动画的循环次数动画的运动方式(设置正向或者反向) |

变形2D

变形的理解

变形属性transform：translate() scale() rotate() skew()；

(只折腾自己)

transform里，不然下面再写一个，就会覆盖上面

位移---translate()

缩放---scale()

旋转---rotate()

倾斜---skew()

位移 transform: translate();

translate(参数1，参数2)

参数值1:是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，

参数2:是指在y轴上移动的距离，正值向下，负值向上，参数2默认为0

translateX()沿着x轴方向平移

translateY()沿着y轴方向平移

translateZ()沿着z轴方向平移结合视距起作用.不能是百分比数值（3d变化）

注意：

1、平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的
2、位移的参考原点是元素的原来所处的位置
3、如果是通过active进行位移，执行完毕后会还原
4、不会影响别的元素
5、对于行内元素是没有效果的

javascript 复制代码

  //垂直水平居中的效果

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  /* transform: translateX(-50%) translateY(-50%); */

旋转t ransform: rotate();

deg，比如rotate（45deg）

反之如果这个值为负值，元素对原点中心进行逆时针旋转。

x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。

rotateX() ，指元素围绕其 X 轴以设定的度数进行旋转

rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转

rotateZ() , 元素围绕其 Z 轴以设定的度数进行旋转

缩放 transform:scale();

这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。

只有一个值的时候第二个值和第一个值是相等的；

两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。

transform:scaleX();元素只在x轴上缩放元素

transform:scaleY();元素只在y轴上缩放元素

倾斜 transform:skew()

skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。

x轴的倾斜x角度,y轴默认为0；

x轴的倾斜角度，第二个参数表示y轴的倾斜角度。

deg

x值：为正则向左变形，为负则向右变形

y值：为正则向上变形，为负则向下变形

以上是以左上角为参照向左向右，向上，向下变形

x轴y轴进行设置：这里的X/Y也是是需要大写的。

transform:skewX() ；

transform:skewY()；

变形原点 transform-origin

transform-origin 改变原点的位置

transform-origin属性，该属性只有在设置了transform属性的时候会起作用也有两个属性值：

transform-origin:（水平方向垂直方向），默认值transform-origin:（center center）

值可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值

变形3D

父元素样式：

3D变化需要父元素设置样式才能保留3d的变化效果

3d变化：transform-style：preserve-3d; 默认值flat

（景深）：perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px

html{perspective: 800px; },

父元素上，例如：perspective：800-1200px；一般为900px-1000px

位移 :translate3d translateX translateY translateZ

translate3d(x,y,z):必须传递三个参数

translateX(x)translateY(y)translateZ(z)参数单位为px

x值：沿着x轴向右，为正；沿着x轴向左，为负

y值：沿着y轴向下，为正；沿着y轴向上，为负

z值：沿着z轴向屏幕外，为正；沿着z轴向屏幕内，为负

旋转:rotate3drotateXrotateYrotateZ

角度) rotateY(角度) rotateZ(角度) 沿着元素中心点穿过的某个轴旋设置的角度deg

rotateX为正则顺时针旋转，为负则为逆时针旋转

rotateY 为正则逆时针旋转，为负则顺时针旋转

rotateZ为正则顺时针旋转，为负则为逆时针旋转

transform-origin：left来设置，比如绕着元素的左边框旋转

（x,y,z,deg）:沿着自定义轴旋转deg为角度()

属性定义当元素旋转到背面向屏幕时，是否可见

visible 背面可见

hidden背面不可见

缩放：scale3d scaleXscaleYscaleZ

scale3d(num,num,num):必须要传三个参数

scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴方向缩放相应的倍数

参数为数字，无单位

比较麻烦，感兴趣的自己研究，了解即可

动画库

|----|----------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 网址 | 线上css |
| 1 | href="https://animate.style/#documentation" https://animate.style/#documentation | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |