CSS动画

浏览器渲染原理

步骤

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两棵树合并成为一颗渲染树（render true）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）

三棵树
三种更新方式 1.div.remove()会触发当前消失，其他元素relayout
2.改变背景颜色，直接repaint+composite
3.改变 transform ，只需 composite

CSS动画的两种做法（transition 和 animation）

transition

四个常用的功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew
重点：这些功能一般都需要配合 transition 过渡。
inline 不支持 transform，需要先变成 block

translate 常用写法

translateX(<length-percentage>)
translateY(<length-percentage>)
translate(<length-percentage>, <length-percentage>?)
translateZ(<length>) 且父容器 perspactive
translate3d(X, Y, Z)
重点：translate(-50%, -50%) 可做绝对定位元素的居中

scale

scaleX(<numer>)
scaleY(<number>)
scale(<number>, <number>?)

rotate

rotate([<angle> | <zero>])
rotateX([<angle> | <zero>])，以 X 轴旋转
rotateY([<angle> | <zero>])，以 Y 轴旋转
rotateZ([<angle> | <zero>])，以 Z 轴旋转
rotate3d([<angle> | <zero>])
重点：一般用于360度旋转制作loading

skew

skewX([<angle> | <zero>])
skewY([<angle> | <zeor>])
skew([<angle> | <zeor>], [<angle> | <zero>]?)

transition 过渡

作用补充中间帧
语法

transition: 属性名时长过渡方式延迟
transition: left 200ms linear
可以用逗号分隔两个不同的属性
transition: left 200ms, top 400ms
transition: all 200ms
可以用 all 代表所有属性
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

重点 并不是所有属性都能过渡
display: none => block 没法过渡
一般改成 visibility: hidden => visible
示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #heart {
            display: inline-block;
            margin: 100px;
            position: relative;
            transition: all 1s;

        }

        #heart:hover {
            transform: scale(1.2);

        }

        #heart>.left {
            background: red;
            width: 50px;
            height: 50px;
            position: absolute;
            transform: rotate(45deg) translateX(31px);
            bottom: 50px;
            left: -50px;
            border-radius: 50% 0 0 50%;
        }

        #heart>.right {
            background: red;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            transform: rotate(45deg) translateY(31px);
            bottom: 50px;
            right: -50px;
            border-radius: 50% 50% 0 0;
        }

        #heart>.bottom {
            background: red;
            width: 50px;
            height: 50px;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

animation

缩写语法 animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;

时长：1s 或 1000ms
过渡方式：跟 transition 取值一样
次数：3 或者 2.4 或者 infinite
方向：reverse | alternate | alternate-reverse
填充模式：none | forwards | backwards | both
是否暂停：paused | running
以上所有属性都有对应的单独属性

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #heart {
            display: inline-block;
            margin: 100px;
            position: relative;
            animation: .5s heart infinite alternate-reverse;

        }

        @keyframes heart {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.2);
            }
        }

        #heart>.left {
            background: red;
            width: 50px;
            height: 50px;
            position: absolute;
            transform: rotate(45deg) translateX(31px);
            bottom: 50px;
            left: -50px;
            border-radius: 50% 0 0 50%;
        }

        #heart>.right {
            background: red;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            transform: rotate(45deg) translateY(31px);
            bottom: 50px;
            right: -50px;
            border-radius: 50% 50% 0 0;
        }

        #heart>.bottom {
            background: red;
            width: 50px;
            height: 50px;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

浏览地址

写在最后

一定要多练一定要多练一定要多练！！！！！

CSS知识点总结

CSS动画

浏览器渲染原理

CSS动画的两种做法（transition 和 animation）

transition

transition 过渡

animation

写在最后