【Hello CSS】第九章-如何画一个体验更好的动画？

• 做者：陈大鱼头
• github： KRISACHAN

在上一节中， 不走心 地画了一些 CSS图案 ，本节就继续不走心地 画动画 。

CSS的动画属性

在CSS中，animation 、 transition 跟 transform 使咱们经常使用于制做动画的属性，咱们先来大体地来了解下这三个属性。

transform

CSS transform 属性容许你旋转，缩放，倾斜或平移给定元素。

这是经过修改CSS视觉格式化模型的坐标空间来实现的。

transform 能够设置元素 2D 或者是 3D 的变换，其变换行为有如下几种：

值	描述
translate	位置移动
scale	缩放
rotate	旋转
skew	倾斜
perspective	透视

不一样值的效果以下：

地址在此：codepen.io/krischan77/…

animation

CSS animation 是正规的CSS 动画属性，经过不一样的值，能够画出各类有趣的动画。

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定须要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。
inherit	从父元素继承属性。

小DEMO效果以下：

地址在此：

codepen.io/krischan77/…

transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可让属性变化成为一个持续一段时间的过程，而不是当即生效的。

此属性能够很好的配合上面两个属性。

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果须要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

小DEMO效果以下：

地址在此：

codepen.io/krischan77/…

上面咱们大体了解了三个经常使用于作动画的属性，下面咱们来从实际的栗子来说解如何画好一个动画。

产品经理让你画个球

产品经理在下午5点半，正在刷某音的时候想到了一个方案，就是在明天上线的H5页面中加个弹球的loading动画。

产品经理说：“鱼头呀，我以为咱们的H5页面能有个弹球的loading动画就行了，可是明天运营部门就要推广了，因此辛苦你一下，今晚加个班，画一个吧！”

鱼头开（nan）心（guo）地说：“好的，立刻画。”

而后就开始愉（shang）快（xin）地画球。

约莫过了一个小时，终于完成了，而后高兴地发了给产品经理看，效果以下：

代码以下：

<style> html, body, div { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .content { width: 300px; height: 600px; border: 1px solid; margin: 30px auto; position: relative; } .ball { background: skyblue; border-radius: 50%; width: 100px; height: 100px; position: absolute; left: calc(50% - 50px); animation: 3s move linear infinite; transform: translateY(0px); } @keyframes move { 0% { transform: translateY(0px); } 50% { transform: translateY(500px); } 100% { transform: translateY(0px); } } </style>
<div class="content">
    <div class="ball">
    </div>
</div>
复制代码

鱼头说：“产品经理，你看下效果。”

产品经理：“这效果确定不行啊。”

鱼头问：“为啥？”

产品经理：“咱们画动画的时候，要 尽量的遵循物理世界的原则，一个能够弹跳的球，怎么多是这样硬不溜秋的呢？弹跳球的弹性是很是好的，当你把球球扔到地上时，它自己会发生一个弹性形变，即变形后马上恢复原状，随后它把储存的弹性势能装化为动能，就能够弹起来了。 ”

鱼头心里戏：“彻底听不懂。”

鱼头回答道：“好，我改！”

产品经理：“那就辛苦你加班了，我约了女友，不能加班，你单身，996都不要紧。”

鱼头此时心里毫无波澜，甚至有点想写代码。

一个小时以后，鱼头又完成了一版，因而乎就录了个GIF发给产品经理，效果以下：

核心代码以下：

.ball {
    background: skyblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);
}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
    }
}
复制代码

鱼头心里OS：“这下必定能经过了，我 利用scale的变形性，在小球下落的时候改变小球的形状，用以模拟物理环境下弹跳球弹跳的状态 ，我真的太聪明了，这样都能让我想到。”

鱼头笑嘻嘻地发微信给产品经理

鱼头：“产品经理，我又作好了一版，你看一下？”

产品经理：“效果不错，可是还须要再打磨一下。”

鱼头震惊地发出：“啥？”

产品经理：“你的动画效果是有了，可是若是能加上一些视觉上的优化，例如球体的反光，地面上的阴影或者是倒影，效果会更好。”

鱼头此时心里仍是毫无波澜，甚至有点想笑，不，他此时就是想哭。

再次度过愉快的一小时，鱼头又完成了一版

效果以下：

核心代码以下：

.content {
    width: 300px;
    height: 600px;
    margin: 30px auto;
    position: relative;
    -webkit-box-reflect: below 0px -webkit-linear-gradient(transparent,transparent 50%, rgba(255,255,255,.6));
}
.ball {
    background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);

}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
        background: radial-gradient(circle at 43% 0, skyblue 57%, #104b63);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
        background: radial-gradient(circle at 37% 0, skyblue 63%, #104b63);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
        background: radial-gradient(circle at 42% 0, skyblue 58%, #104b63);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
        background: radial-gradient(circle at 41% 0, skyblue 59%, #104b63);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
}
复制代码

鱼头再次心里OS：“在原来弹跳形变的基础上，我 利用 radial-gradient 给小球底部加上了阴影，而后又利用 -webkit-box-reflect 给整个容器加上了反向的镜像效果，这个镜像的灵魂效果是 60% 的透明度呀，这样看起来就更像光滑瓷砖地面的倒影。 我真是太聪明了，此次确定能过了。 ”

（以上属性在鱼头上一篇文章 『第八章-CSS图形』都有展现DEMO，有兴趣能够去看看。）

鱼头又发微信给产品经理

鱼头：“产品经理，我又作好了一版，你看一下？”

产品经理：“此次效果很好。”

产品经理：“可是，你仍是忽略了两件很重要的事。那就是 重力加速度 的表现 以及 弹力球与空气，地面所产生的摩擦力 的表现。

弹力球下落时，因为重力加速度的缘由，因此速度会愈来愈大，往上跳时速度会愈来愈小直至0。

弹力球的空气阻力以及与地面接触时力的损耗致使地面对弹力球自身的副作用力减小，因此，小球下次上跳的距离会比下次的小，碰到地面时的形变也是，至于这个数值是多少，你不须要深究，毕竟是虚拟的状态，也不可能100%模拟现实环境。 ”

产品经理：“还好此次是让你作个loading动画，自己loading动画就是循环性的动画，否则我就让你加上重力加速度跟摩擦力的损耗状态了。”

鱼头当心翼翼地问：“那我能够回家了吗？我肚子好饿。”

产品经理：“等下，我忽然又有一个想法.....”

因而乎，鱼头就这么过了一个浪漫的夜晚。

后记

其实CSS可画的动画是不少的，只要咱们细心的去组合不一样的 CSS 属性，就能做出不少有趣的效果。

【Hello CSS】系列

【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助你们更深入地了解而且提升CSS在各位开发者心目中的地位。因为鱼头我水平有限，文笔有限，若是各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会很是感谢的；若是经过文章有任何想法或疑问，也但愿各位能积极留言，咱们互相探讨；若是经过本系列文章有所收获，这就让鱼头我喜不自胜了！

若是你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。