前言

今天是5月3日，阳光明媚，正适合来掘金“劳动劳动”。于是乎，我把目标对准了惦记已久的掘金头像。是的，就是那个 hover 一下，就变速旋转的头像，几欲跳出电脑屏幕。如果你了解一点儿动画，就不难领悟它的实现。咱们不妨来试试。

一、animation （动画）实现

我的第一思路是 aniamtion 可以实现。

1.回顾 animation 属性

animation 属性是一个简写属性，用于设置如下八个动画属性

属性	含义	常见属性值
animation-name	动画名称	自定义，与 @keyframes 名称保持一致
animation-duration	动画时长	自定义，通常以 s 为单位
animation-timing-function	动画速度曲线	ease 慢→快→慢（默认值）； linear 匀速；cubic-bezier(n,n,n,n) 自定义
animation-delay	动画延迟时间	自定义，通常以 s 为单位
animation-iteration-count	动画重复次数	infinite 为无限循环
animation-direction	动画执行方向	normal 正向播放；reverse 反向播放； alternate 为正反交叉
animation-fill-mode	动画执行完毕时状态	forwards 停在结束状态；backwards 停在开始状态
animation-play-state	动画运行状态	paused 为暂停，通常配合 hover 使用

2.animation 复合写法注意事项

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画名称和动画时长为必写属性
属性值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示动画延迟时间
animation 必须配合 @keyframes 一起使用

3.使用 aninmation 实现头像变速旋转

<!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>
    <style>
        img {
            width: 100px;
            height: 100px;
            border: 1px solid purple;
            border-radius: 50%;
        }
        img:hover {
            /* 写法1：复合写法 */
            animation: rotate 59s 1s cubic-bezier(.34, 0, .84, 1);
            /* 写法2： */
            /* animation-name: rotate;
            animation-duration: 59s;
            animation-delay: 1s;
            animation-timing-function:cubic-bezier(.34, 0, .84, 1) ; */
        }
        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(666turn);
            }
        }
    </style>
</head>
<body>
    <img src="./linwanxia.jpg" alt="">
</body>
</html>

（本来想弄个动图，效果就不言而喻啦。然鹅......一言难尽）

二、trasition （过渡）实现

为什么会想到 transition 呢，因为掘金就是这么干的。说实话，当我怀着好奇地心右键检查的时候，挺意外的。原来 transition 也可以实现。

1.回顾 trasition 属性

trasition 属性是一个简写属性，用于设置如下四个过渡属性

属性	含义	常见属性值
transition-property	过渡的属性名称	一般是 all
transition-duration	过渡完成的时间	自定义，通常以 s 为单位
transition-timing-function	过渡速度曲线	ease 慢→快→慢（默认值）； linear 匀速；cubic-bezier(n,n,n,n) 自定义
transition-delay	过渡延迟时间	自定义，通常以 s 为单位

2.trasition 复合写法注意事项

trasition：property duration timing-function delay;

过渡的属性名称和过渡完成的时间为必写属性
属性值不分先后顺序
如果有两个时间值，第一个时间表示过渡完成的时间，第二个时间表示过渡延迟时间

3.使用 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>
    <style>
        img {
            width: 100px;
            height: 100px;
            border: 1px solid purple;
            border-radius: 50%;
        }
        img:hover {
            transform: rotate(666turn);
            /* 写法1：复合写法*/
            transition: all 59s 1s cubic-bezier(.34, 0, .84, 1);
            /* 写法2：*/
            /* transition-property: all;
            transition-duration: 59s;
            transition-delay: 1s;
            transition-timing-function: cubic-bezier(.34,0,.84,1); */
        }
    </style>
</head>
<body>
    <img src="./linwanxia.jpg" alt="">
</body>
</html>

三、animation 和 trasition 的区别

咱们可以注意到，animation 和 transition 都能实现头像的变速旋转这一效果，那它们有啥区别呢？不难发现，animation 的属性要多一些，那它的功能自然是强大一些啦。

trasition 是一个过渡的效果，没有中间状态，需要设置触发事件（如 hover 等）才能执行

animation 是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。

举个例子可能会更通俗。假如，我现在有个需要：

进入页面头像变速旋转
动画无限循环
hover 一下停止动画我想 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>
    <style>
        img {
            width: 100px;
            height: 100px;
            border: 1px solid purple;
            border-radius: 50%;
            animation: rotate 59s 1s infinite cubic-bezier(.34, 0, .84, 1);
        }
        img:hover {
           animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(666turn);
            }
        }
    </style>
</head>
<body>
    <img src="./linwanxia.jpg" alt="">
</body>
</html>

补充：关于贝塞尔曲线

对于以上多次出镜的 cubic-bezier(.34, 0, .84, 1);，你是否疑惑不解？看图秒懂。

我终于对掘金头像下手了

前言