html动画

1. 过渡

可选值

1、可以写多个css属性值，逗号隔开即开

2、如果不写或过度属性写错了，默认所有属性都发生过渡

       
        /* transition-property: all; */
        /* 过渡的时间  ms/s   必
        /* transition-duration: 3s; */
        /* 过渡变化曲线 选写*/
        /* transition-timing-function: ease; */
        /* 过渡的延迟  选写  默认是0s*/
        /* transition-delay: 2s; */
        /* 过渡的简写，过渡的时间是必写的，其他都有默认值 */
        /* transition: all ease 2s 0s; */

2. 动画

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，例如hover，acitve时，动画可以⾃动触发动画

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

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

⽅法⼀：

@keyframes 关键帧名称{

from{初始状态属性}

to{结束状态属性}}

⽅法⼆：

@keyframes 关键帧名称{

0%{初始状态属性}

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

100%{结束状态属性}

注意：

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

2、可以同时设置关键帧，⽤逗号（

,）隔开就⾏

2. 调用

1 animation-name绑定到选择器的关键帧的名称，告诉系统需要执⾏哪个动画(必填)设置动画的名@keyframs相对应，可以设置多个动画，逗号隔开，应⽤多个动画 2 animation-duration动画的完成时间，告诉系统动画持续的时长 （必填） 时间单位：s ms 3 animation-timingfunction设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型） * ease [i:z] 默认值，慢速开始，先加速，然后再减速 *linear 匀速运动 ease-in 先慢后快加速运动 ease-out 先快后慢减速运动 ease-in-out 以慢速开 始和结束的过渡效果 *steps()分布执⾏过渡 效果cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值 4 animation-delay 动画在启动前的延迟间隔 5 animation-iterationcount[,itə'reiʃən]动画的播放次数，告诉系统动画需要执行几n 定义画播放n次 nfinite无限次往返执行 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和 ackwards的特点 8 animation-play-state 告诉系统当前动画是否 需要暂停 running 默认值 动画执 ⾏ paused 动画暂停 9 animation 简写，可以写以上任意 属性的可选值 animation:关键帧的名 称 动画持续的时间 运 动状态(linear(匀速)) 动 画延迟的时间 动画的循 环次数 动画的运动⽅式 (设置正向或者反向)

3. 变形

1. 位移 transform: translate()

translate(参数1，参数2) 属性值1是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，属性值2是指在y轴上移动的距离，正值向下，负值向上，参数2默认为0

translateX()沿着x轴⽅向平移

translateY()沿着y轴⽅向平移

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

注意：

1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于⾃身计算的,x轴往右为正，y轴往下为正，反之

为负

2、位移的参考原点是元素的左上⻆

3、如果是通过active进⾏位移，执⾏完毕后会还原

4、 不会影响别的元素

5、对于⾏内元素是没有效果的

2. 旋转 transform: rotate();

默认情况下是绕着中⼼点进⾏转动的；

默认的单位是deg，⽐如rotate（

45deg）

如果这个值为正值，则是元素对原点中⼼顺时针旋转；

可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。

3. 缩放transform:scale()

缩放属性是让元素根据中⼼原点对对象进⾏缩放。

4. 倾斜transform:skew()

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