CSS动画相关知识详解

谁践踏了优雅 2022-12-04 09:23 108阅读 0赞

## 一.CSS3转换(transform) ##

css3包括两种转换，2D转换和3D转换。  
css3的转换允许我们对元素进行旋转、缩放、移动或倾斜。  
不管2D转换还是3D转换都是操作的同一个的属性：transform

### 1.1 2D转换 ###

有四种转换：rotate、scale、translate、skew

#### 1.1.1 translate ####

在x和y方向平移元素:  
transform: translate(500px, 0px);

说明：  
参数可以是像素或百分比。  
参数1：沿x方向的平移，正表示向右移动  
参数2：沿y方向的平移，正表示向下移动  
如果是百分比是相对于自己的宽高的百分比。

如果仅仅沿x或y某一个方向运动，也可以使用：  
transform:translateX(200px); 或 transform:translateY(200px);

#### 1.1.2 rotate ####

旋转元素， 是指有沿着 z 轴旋转。(就是垂直于屏幕的轴）  
transform:rotate(10deg);  
参数必须是度数。大于0表示顺时针旋转的度数，小于0表示逆时针旋转的角度。

说明:  
旋转的时候默认是以元素的几何中心作为轴来旋转的。  
可以使用 transform-origin: offsetX offsetY;来设置旋转的时候的轴的位置.

#### 1.1.3 scale ####

对元素进行放大。  
transform: scale(倍数);

说明：  
倍数大于表示放大，小于1表示缩小。不需要带单位  
默认任然是元素中心作为放大或缩小的参考点

#### 1.1.4 skew ####

skew是倾斜（斜切）。让元素与x方向或y方向产生倾斜。  
transform: skew(40deg,10deg);  
参数1：x方向的倾斜度数  
参数2：y方向的倾斜度数

### 1.2 3D转换 ###

想对2D转换来说，3D转换浏览器支持的不太好。不过在移动端可以放心的使用。  
3D坐标系：  
默认情况水平向右为x轴正方形、垂直向下为y轴正方形、垂直于屏幕向外的为z轴正方形

#### 1.2.1 perspective属性 ####

perspective（透视）是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现，所有的变化都会被投影到2D的区域展示。

可以简单理解为 视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就越小。

要把它用在父容器中。

#### 1.2.2 translate3d(x,y,z) ####

translate3D(x,y,z) 可以在x,y,z三个方向移动。  
translateZ(z) 只在z轴平移

#### 1.2.3 rotate3d(x, y, z, a) ####

3d旋转。 分别表示绕着x，y，z旋转。 参数中的x，y，z是一个数值。a是一个角度。  
如果a是正值表示顺时针旋转， 如果a是负值表示逆时针旋转。  
x,y,z表示方向矢量，xyz的平方和如果是1的话就是标准矢量，如果不是1就会转换成一个标准矢量。x,y,z分别分别除以他们的平方和得到的值就是标准矢量。 这三个值决定了将来要旋转的时候的坐标轴。

可以使用rotateX、rotateY、rotateZ表示沿着某个轴的旋转  
rotateX(40deg) 等同于 rotate3d(1,0,0,40deg)

#### 1.2.4 scale3d(sx, sy, sz) ####

参数分别表示沿着向相应的坐标轴的缩放。注意sz其实是缩放的translateZ的值，如果没有设置translateZ则sz的值无效的。

scaleX、scaleY、scaleZ分别表示x，y，z方向的缩放。

#### 1.2.5 transform-style ####

表示他的子元素在变形的时候，是在一个2d平面内变形，还是在一个3d平面内变形。  
两个值：flat和preserve-3d  
flat：变形仍然在2d空间  
preserve-3d：3d空间内变形

### 1.3 正方形案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> div{ width: 400px; height: 400px; text-align: center; line-height: 400px; font-size: 60px; } .container{ position: relative; border: 1px dashed #000; margin: 200px auto; transform: rotateY(30deg) rotateX(30deg); transform-style: preserve-3d; animation: 10s linear 0s infinite reverse my_rotate; } .container div{ position: absolute; } .font{ background-color: rgba(100, 100, 100, 1); transform: translateZ(200px); } .back{ background-color: rgba(80, 255, 133, 1); transform: rotateY(180deg) translateZ(200px); } .left{ background-color: rgba(255, 57, 56, 1); transform: rotateY(-90deg) translateZ(200px); } .right{ background-color: rgba(25, 37, 170, 1); transform: rotateY(90deg) translateZ(200px); } .up{ background-color: rgba(232, 255, 204, 1); transform: rotateX(90deg) translateZ(200px); } .down{ background-color: rgba(94, 255, 56, 1); transform: rotateX(-90deg) translateZ(200px); } @keyframes my_rotate { from{ transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } to{ transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); } } </style>
    </head>
    <body>
    <div class="container">
        <div class="font">前</div>
        <div class="back">后</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="up">上</div>
        <div class="down">下</div>
    </div>
    </body>
    </html>

## 二.CSS3过渡(transition) ##

transition属性定义一个元素两种状态之间的过渡。是下面四个属性的简写：  
transition-property, transition-duration, transition-timing-function, transition-delay  
不同的状态可以通过伪类像:hover、:active来定义。也可以通过js代码来动态的改变。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过渡</title>
        <style> .box { border: 1px solid #000; margin: 100px auto; display: block; width: 100px; height: 100px; background-color: #0000FF; /*过渡的属性 过渡时间 过渡函数 延迟时间*/ transition: width 2s linear 1s; } .box:hover { width: 200px; } </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
    </html>

如果想同时定义多个过渡属性，则可以使用逗号分开。  
transition: width 2s linear 1s, height 3s linear 2s;

过渡属性和过渡周期不能省略。  
延迟时间如果不设置默认是 0s  
过渡函数主要有以下几个值：  
如果不设置默认是：ease  
transition-timing-function: ease;  
transition-timing-function: ease-in;  
transition-timing-function: ease-out;  
transition-timing-function: ease-in-out;  
transition-timing-function: linear;  
transition-timing-function: step-start;  
transition-timing-function: step-end;

## 三. CSS3动画(animation) ##

我们在使用 transition实现动画的时候只能指定要改变的属性的开始值和结束值，然后在这两个值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果  
 而animation通过定义多个关键帧( keyframes )以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。  
下面的表格列出了 @keyframes 规则和所有动画属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d137c4a82fd34703b9fd856c7d5c0f98.png