多个图标的动画效果（动画的衔接）

前面是一个图标的动画，这篇试一试多个图标的动画：
先创建四个图标，

<span class="home icon">Home</span>
<span class="search icon">Search</span>
<span class="user icon">User</span>
<span class="mail icon">Mail</span>
<span class="chat icon">Chat</span>

还是先把最基本的布局弄一下：

    body{background: #8b8ab3;}.icon{font-size: 0%;cursor: pointer;display: inline-block;position: relative;margin-right: 20px;background: #ffffff;border-radius: 50%;width: 100px;height: 100px;/*设置图表位置，便于观察动画*/margin: auto;top: 100px;left: 100px;right: 100px;bottom: 100px;}

添加图标并设置图标的属性：

    .icon::before{font-family: 'icon-font';content: "\e609";font-size: 50px;color: #8b8ab3;text-align: center; box-sizing: border-box;display: block;line-height: 100px;  /*设置图标居中 等于height*/}.home::before{content:"\e62e";}.search::before{content:"\e630";}.user::before{content:"\e631";}.mail::before{content:"\e632";}.chat::before{content:"\e62d";}

上面的步骤完成后，可以看到基本的图标，但现在他们还不会动。

然后，我们开始制作动画，还是使用 keyframes:

    @-webkit-keyframes move {from {opacity:0;-webkit-transform: translateY(100%);}to {opacity:1;-webkit-transform: translateY(0%);}}@keyframes move {from { /*从透明度为 0 ，位置为y轴下100%距离*/opacity:0;transform: translateY(100%);}to { /*变为  透明度为1 ，y轴返回原位*/opacity:1;transform: translateY(0%);}}

opacity 是设置图标的透明级别：https://www.w3school.com.cn/cssref/pr_opacity.asp
transform是变形的意思，包含几种变形的方式，可参考: https://blog.csdn.net/weixin_42220533/article/details/89476267
以上动画的过程表述为：透明度由 0 变为 1，位置从下面移到上面来。
然后，在 .icon 属性中设置动画的执行:

 -webkit-animation:move 1s linear;animation:move 1s linear;

效果图：

为了弄清楚动画的变化过程和理解代码，我们设置动画执行时间为 4秒：

接着，我们要让动画变得更加好看，让图标一个接着一个的执行动画效果，为每一个图标设置延迟时间：

    .home{-webkit-animation-delay:0s;animation-delay:0s;}.search{-webkit-animation-delay:.1s;animation-delay:.1s;}.user{-webkit-animation-delay:.2s;animation-delay:.2s;}.mail{-webkit-animation-delay:.3s;animation-delay:.3s;}.chat{-webkit-animation-delay:.4s;animation-delay:.4s;}

animation-delay 设置动画的延迟时间：https://www.w3school.com.cn/cssref/pr_animation-delay.asp
为了动画清楚，实际设置的时间较长一点，效果如下：

到此，动画已经做好了，但是，仔细观看，发现动画还是有一点美中不足。可以看出，后面的图标几乎是“掉”到下面的，这使得动画显的有点不流畅的感觉。原因是，除了第一个图标外，其他的图标我们都设置了延迟，而在动画启动的一瞬间，动画会变成透明的并且向下移，所以，我们会看到图标“一闪而过”。
解决上面的问题，我们使用 animation-fill-mode: both; 这一属性.
https://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp
这一属性规定了元素在动画时间之外的状态是怎样的。

这里设置的是 both，根据定义，理解为，在动画开始之前，图标显示为 from里面的值，即在下面位置，透明度为0；动画完成后，图标显示为 to 里面的动画，即回到原位，透明度为1。

    .icon{-webkit-animation-fill-mode: both;animation-fill-mode: both; /*backwards*/}

效果如下，可以看到一闪而过的情况没有了。

最后，我们修改一下，动画时间函数。使得图标在返回到最上面时会有反弹效果。
先在：https://cubic-bezier.com/#0,0,1,1 这个网站绘制函数，然后带入到 css 中。

    .icon{-webkit-animation:move 1s  cubic-bezier(.62,-0.91,.45,1.97);animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);-webkit-animation-fill-mode: both;animation-fill-mode: both; /*backwards*/}

修改一下内边距和动画时间，最终变为：

多个图标的动画效果（动画的衔接）相关推荐

P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习 1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习. 知识点: 元素设置透明效果设置3d变形效果设置动画旋转 2. 3D复 ...
P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表 1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表. 2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转.在这个案例中我们通过拆分 ...
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
安卓修改动画效果--动画差值器TimeInterpolator
前一段时间让实现一个类似弹幕的效果,从右到左飘过去,时间八秒,嗯,很好做,一个动画就ok了布局代码: <?xml version="1.0" encoding=" ...
php动画效果,动画效果总结
摘要: 动画效果总结 .main{width:100px;height: 100px;margin: 20px 20px;float:left;} .fadein,.fadeout,.fadetogg ...
js动画效果 - 动画曲线
1 参考常见的动画都是速率相同的平滑效果,而有些动画在变动过程中速率不同,比如有些网站的返回顶部的动画效果会经过慢-快-慢的效果,这就设计到数学模型了,有一片参考文章:http://blog.csd ...
用计算机做动画效果,动画图片多种效果制作步骤
动画图片多种效果制作步骤:文字绕月旋转做法 <一>打开FLASH软件,设置版面及导入背景图片,按图解进行,并在35帧处插入帧 . 当这些操作完后与平时在办公软件打字一样,打一部分就保存,这 ...
ios开发——使用CALayer和Core Animation做动画效果
一. CALayer (一). CALayer简介在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView,其实UIV ...
UICountingLabel实现数字变化的动画效果-b
在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果: 动画效果怎么做呢? 一.下载UICountingLabel 下载地址: https://github.co ...

多个图标的动画效果（动画的衔接）

多个图标的动画效果（动画的衔接）相关推荐

最新文章

热门文章