动画 - 掘金

基础知识

transition

transition有四个属性：

transition-property

动画展示哪些属性（transition-property）：可以使用all关键字

transition-duration

动画时间多久（transition-duration）

transition-timing-function

控制动画速度变化（transition-timing-function：linear，ease，ease-in，ease-out，ease-in-out，贝塞尔曲线等）

transiton-delay

动画是否延迟执行（transiton-delay）

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s,background 2s;
}

div:hover
{
width:300px;
background:red;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

动画animation

首先解释keyframe（关键帧）

注意：在动画运行到100%的时候，会展示最初是的状态为了不跳脱，最好100%的时候样式为初始的状态

@keyFram是一个动画模板，其中，可以使用百分比，从0%到100%的任意值，分别在每个百分比中加上不同的属性，从而让元素达到一种在不断不变化的动画效果。这和我们制作flase动画一样，我们只需设计几个关键帧，系统就可以生成动画啦!

      /*定义关键帧动画*/
    @keyframes myframe {
        0%{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
         50%{
             width: 200px;
             height: 200px;
             border-radius: 50%;
         }
         100%{
             width: 100px;
             height: 100px;
             border-radius: 50%;
         }
     }

分别定义了动画0%（开始时），50%（一半时），100%（播放结束时）的效果，浏览器就能直接生成动画了

常用属性

1.animation-name: @keyframe动画的名称。

2.animation-duration: 动画完成一个周期需要的时间，默认是0。

3.animation-timing-function:动画的速度趋势（缓动效果），默认是ease。

4.animation-delay: 动画开始的延迟时间，默认是0。

5.animation-iteration-count: 动画播放的次数，默认是1。可以使用数字，也可以使用“infinite”，表示无限次循环播放。

6.animation-direction: 动画下一次播放的顺序，可以顺序或逆序，默认是"normal"。

7.animation-play-state: 动画是否正在运行或暂停，默认是"running"。

8.animation-fill-mode: 对象动画时间之外的状态。

animation和transition的区别

animation是针对@keyframe而言的。它只是在事件发生时触发动画，但是并不改变原来的属性，当事件完成，又恢复原样，transition强调过渡动画，它确确实实改变了属性

实例

在浏览器中央有一个红色的正方形，鼠标放上去，变为圆形。鼠标移除，变为正方形。

transform

使什么什么变形，改变

属性包含

rotate()/skew()/scale()/translate(), 还有x、y之分比如rotatex()和rotatey()，以此类推

下面我们来分解每个属性

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。

transform:skew()：

含义：倾斜；

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

实例

使用animation实现转盘

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div></div>
    </body>
</html>
<script></script>
<style>
    div {
        width: 200px;
        height: 200px;
        background-image: linear-gradient(to bottom right, red, blue);
        border-radius: 50%;
        background-size: 100% 100%;
        animation-name: myframe;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes myframe {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

实现的是一个匀速的转动

使用transition和transform结合实现匀速转盘

单独使用transform只能实现转动，但是卡顿的，必须结合transition来实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div></div>
    </body>
</html>
<script>
    setTimeout(() => {
        document.getElementsByTagName('div')[0].style.transform = `rotate(360deg)`;
    }, 3000);
</script>
<style>
    div {
        width: 50px;
        height: 50px;
        background-color: lightcoral;
        transition: transform 2s linear;
    }
</style>

注意：transition使用必须要有时间差，以及前后样式的不一致