css动画

什么是动画：

• 使用css技术来控制页面元素css属性的变化

css动画优势：

• 不需要用js也能写

• 一般兼容到IE10以上浏览器

一、过渡

1. 什么是过度（transition）

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

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

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

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

2. 过度的4个属性

-transition-property设置需要过渡属性（选填）

• none 没有属性获得过渡效果

• all 所有属性都参与过渡 默认值

• property ⾃定义应⽤过渡效果，⼀个或多个，⽤逗号隔开

-transition-duration设置过渡持续时间（必填）

• 单位s和ms （1s=1000ms）

-transition-timing-function设置过渡变化曲线（缓动效果）（选填）

• ease默认值，慢速开始先加速然后再减速

• linear匀速运动

• steps（）分步骤执行过度效果

• cubic-bezier(n,n,n,n)⽴⽅⻉塞尔曲线函数，值是0-1之间的数值。

-transition-delay设置过渡效果的延迟，等一段时间后执行相关过度（选填）

3. 过渡transition的简写：

-可以同时设置过渡的所有相关属性

-如果要写延迟，俩个时间中，第一个写过渡时间，第二个写延迟时间

二、动画

1. 动画的理解：

动画和过度类似，都是可以实现一些动态效果，不同的是过度需要在某个属性发生变化时才能触发，例如hover、active时，动画可以自动触发动画

2设置动画的步骤：

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

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

方法一：
@keyframes 关键帧名称{
from{初始状态}
to{结束状态}
}
方法二：
@keyframes 关键帧名称{
   0%{初始状态}
    50%{中间的状态}
    100%{结束状态}
}
可以同时设置关键帧用逗号隔开就行

-第二步：调用关键帧

• animation-name :设置动画的名字(必填)

• animation-duration:动画完成时间告诉动画持续的时长（必填）

• animation-timing-function：设置动画如何完成一个周期

• animation-delay：动画启动前延迟时间间隔

• animation-iteration-count：设置动画 的播放次数，告诉系统动画需执行几次；n定义动画播放n次；infinite无限次往返执行；

• animation-dirction:设置是否应该给轮流反向播放的动画

• animation-fill-mode： 规定当动画不播放时，（完成时,延时未开始播放时），引用到的元素样式

• animation-play-state ：告诉系统当前动画是否需要暂停（running默认值，动画执行；paused动画暂停）

-animation：设置简写时可以写上任意属性可选值

三、变形2D

变形属性transform：

位移—translate()

缩放—scale()

旋转—rotate()

倾斜—skew()

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

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

translateX()沿着x轴⽅向平移

translateY()沿着y轴⽅向平移

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

注意：

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

为负

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

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

4、 不会影响别的元素

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

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

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

变形不会影响到⻚⾯的布局(只折腾⾃⼰)

尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯

可选值：

3.1 位移 transform: translate()

1 //垂直⽔平居中的效果

2 position: absolute;

3 left: 50%;

4 top: 50%;

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

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

3.2 旋转 transform: rotate();

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

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

45deg）

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

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

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

2.

3.

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

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

只有⼀个值的时候第⼆个值和第⼀个值是相等的；

两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

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

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

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

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

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

transform:skewX() ；

transform:skewY()；

transform-origin:（⽔平⽅向 垂直⽅向），默认值transform-origin:（

center center）

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

3.3 缩放transform:scale()

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

默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素变

得更⼤。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值：

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

也不会影响其他盒⼦

3.4 倾斜transform:skew()

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

⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；

两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。

变形的单位是deg

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

3.5 变形原点 transform-origin

原点就是元素的中⼼，通过 transform-origin 改变原点的位置

⽤变形原点 transform-origin属性，该属性只有在设置了transform属性的时候会起作⽤

设置偏移量值都是从元素左上⻆开始的

transform-origin也有两个属性值：