前端小白-CSS 动画

一、浏览器渲染的原理

我们知道，每次打开一个网页。浏览器都会对页面进行一次渲染。那么，浏览器具体做了哪些步骤呢？

Step1 打开网页，浏览器会将你HTML的标签和内容组成一个HTML树（DOM）

DOM

Step2 其中CSS部分也会组成一个CSS树（CSSOM）

CSSOM

Step3 接着，他会把两部共同拥有的元素包括里面的内容提取出来，最终组成渲染所需要的渲染树（render tree）

render tree

Step4 然后浏览器根据“render tree”进行绘制。首先对元素进行布局：文档流、盒模型、计算它的大小和位置等

Step5 紧接着对布局好的元素进行绘制：边框颜色、阴影、文字颜色等

Step6 最后一步就是把以上所有，根据层叠关系合成为我们看到的效果

二、CSS动画的两种做法（transtion和animation）

html和css基础代码的编写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跳动的心</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .heart {
            display: inline-block;
            margin: 500px;
            position: relative;
        }
        .left {
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 100%;
            left: 100%;
            transform: rotate(45deg) translateY(70%);
            border-radius: 50% 50% 0 0;
        }
        .right {
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 100%;
            right: 100%;
            transform: rotate(45deg) translateX(70%);
            border-radius: 50% 0 0 50%;
        }
        .bottom {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

使用transtion来实现
通过给heart盒子添加一个hover属性，使鼠标放上去放大1.3倍

.heart:hover {
    transform: scale(1.3);
}

接着在heart属性中加上一个过渡

.heart {
    display: inline-block;
    margin: 500px;
    position: relative;
    transition: all .3s;
}

添加完后，打开网页。当鼠标放上去就回触发hover的放大属性，并且带有heart的过渡效果。当鼠标移开，hover的放大属性取消，但heart的过渡还在，所以会慢慢恢复原来的大小。

使用animation来实现
先设置一个关键帧集，并命名为jump

@keyframes jump {
    0% {
        transform: scale(2);
    }

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

然后将jump的关键帧集赋予给heart标签，在heart内添加animation属性。其中jump为关键帧集的名字，.6s为总时间，infinite为循环，alternate为正反执行

.heart {
    display: inline-block;
    margin: 500px;
    position: relative;
    animation: jump .6s infinite alternate; <-- 我是新增内容 -->
}

前端小白-CSS 动画