一.动画介绍

动画分为 补间动画 和 帧动画,分别对应CSS中的transition,animation
屏幕快照 2018-05-29 上午2.18.03.png

首先,我们先介绍一下transition

二.transition

transition 有4个值,分别是:

transition-property          属性
transition-duration          持续时间
transition-timing-function   动效
transition-delay             延迟时间

屏幕快照 2018-05-29 上午2.21.57.png

我们先来看一个实例吧。
屏幕快照 2018-05-29 上午2.21.37.png

看完这个实例可能还有些不太懂,接下来我们对某些可选值进行讲解。

1.transition-property

transition-property 即要产生动画的是什么,如果填写all代表整个范围内的所有属性。

提示:下面是不支持动画的一些属性。
屏幕快照 2018-05-29 上午2.22.35.png
这些属性我们不需要去死记硬背,用到的时候试一下就知道了。

2.transition-timing-function

transition-timing-function 就是动画的效果,主要有以下这些:
屏幕快照 2018-05-29 上午10.48.29.png

他们的函数图像如下:
屏幕快照 2018-05-29 上午10.50.21.png

推荐:
推荐几个选择和调试 transition-timing-function 的网站:
1.缓动函数速查表
2.贝塞尔曲线

三.animation

讲了很多transition,都是补间动画。下面我们来介绍一下与帧动画对应的animation。

animation的属性非常多,大家可以参考下列图片中调试部分的红色属性:
屏幕快照 2018-05-29 上午11.06.43.png

下面用一个实例来理解吧。
先上效果图片:
animation.gif

下面我们来看看源代码。

(1)animation.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用 animation</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!--请在style.css中根据题目要求,完成本次习题-->
    <div class="loading"></div>
    <div class="pillar-loading">
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
    </div>
    <div class="point-loading">
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
    </div>
</body>
</html>

(2)style.css

/*
* 题目要求:
* 1、需设置四分之一边框 loading元素相应的动画的名称
* 2、需按照下面提供的模板,设置柱子 loading的柱子元素的相应的动画的名称
* 3、根据当前样式规则,设置柱子 loading的第三个柱子的动画延迟执行的时间
* 4、需设置圆点loading的圆点元素其动画效果属性,设置其相应的动画名称,动画完成一个周期所花费的时间为1s, 且动画无限循环播放
*/

body {
    background: rgba(0, 0, 0, .7);
}

@keyframes rotateLoading {
    from {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes pillarLoading {
    0%,
    100% {
        background: lightgreen;
    }
    50% {
        transform: scaleY(1.75);
        background: lightblue;
    }
}
@keyframes pointLoading {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(.3);
        opacity: 0.5;
    }
}

/* 四分之一边框 loading */
.loading {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 60px auto;
    position: relative;
    border: 10px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    /* TODO: 填入正确的动画名称*/
    animation-name: rotateLoading;
    animation-duration: 1.1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


/* 柱子 loading */
.pillar-loading {
    width: 60px;
    display: flex;
    justify-content: space-between;
    margin: 100px auto;
}
.pillar-loading .pillar {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background: lightgreen;
    /* TODO: 按照下面模板,替换[animationName],填入正确的动画名称。 */
    /* animation: [animationName] 1s ease infinite; */
    animation: pillarLoading 1s ease infinite;
}
.pillar-loading .pillar:nth-child(2) {
    animation-delay: 0.2s;
}
.pillar-loading .pillar:nth-child(3) {
    /* TODO: 根据当前样式规则,设置柱子 loading的第三个柱子的动画延迟执行的时间 */
    animation-delay: 0.4s;
}
.pillar-loading .pillar:nth-child(4) {
    animation-delay: 0.6s;
}
.pillar-loading .pillar:nth-child(5) {
    animation-delay: 0.8s;
}

/* 圆点 loading */
.point-loading {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
}
.point-loading .point {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    /* TODO: 需设置圆点loading的圆点元素其动画效果属性,设置其相应的动画名称,动画完成一个周期所花费的时间为1s, 且动画无限循环播放 */
    animation: pointLoading 1s infinite;
}
.point-loading .point:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -10px;
    animation-delay: 0.13s;
}
.point-loading .point:nth-child(2) {
    left: 14px;
    top: 14px;
    animation-delay: 0.26s;
}
.point-loading .point:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -10px;
    animation-delay: 0.39s;
}
.point-loading .point:nth-child(4) {
    top: 14px;
    right: 14px;
    animation-delay: 0.52s;
}
.point-loading .point:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -10px;
    animation-delay: 0.65s;
}
.point-loading .point:nth-child(6) {
    right: 14px;
    bottom: 14px;
    animation-delay: 0.78s;
}
.point-loading .point:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    animation-delay: 0.91s;
}
.point-loading .point:nth-child(8) {
    bottom: 14px;
    left: 14px;
    animation-delay: 1.04s;
}

这个也是我学习过程中的一道练习题,分享给大家。

Last modification:May 29, 2018
If you think my article is useful to you, please feel free to appreciate