css3的动画特效--动画序列（animation）

首先复习一下animation动画添加各种参数

（1）infinite参数，表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数，用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下

.close:hover::before{-webkit-animation: spin 1s linear 1s 2;animation: spin 1s linear 1s 2;
}

（2）alternate参数。animation动画中加入反向播放参数alternate。在加入该参数后，动画将在偶数次数时反向播放动画。

.close:hover::before{-webkit-animation: spin 1s linear 1s 2 alternate;animation: spin 1s linear 1s 2 alternate;
}

animation属性参数中，延迟参数是我们较为常用的一种参数。当动画的对象为多个时，我们常常用延迟参数来形成动画序列。如以下代码定义了5个不同的图标：

<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>

图标的基本样式和之前的Close图标一致，不同之处在于此处的图标都设置为inline-block，使它们能够横向排列。代码如下：

.close{font-size:0px;/*使span中的文字不显示*/cursor:pointer;/*使鼠标指针显示为手型*/display:inline-block;width:100px;height:100px;line-height:100px;border-radius:50%;/*使背景形状显示为圆形*/background:#FFF;color:#8b8ab3;text-align:center;
}
.close::before{font-family: 'suningcloud';speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/font-size:48px;display:block;
}

初始化的时候展示，如下图所示；

接下来，为图标添加animation动画，使图标初始位置向下偏移-100%，然后再向上移动回到初始位置，在此过程中同时使图标由完全透明变化为完全不透明

.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
/**/
-webkit-animation: moving 1s linear;
animation: moving 1s linear;
}

@-webkit-keyframes moving {from {opacity: 0;-webkit-transform: translateY(100%);}to {opacity: 1;-webkit-transform: translateY(0%);}
}
@keyframes moving {from {opacity: 0;transform: translateY(100%);}to {opacity: 1;transform: translateY(0%);}
}

以上5个图标的动画效果都是同时进行的，为了使图标运动带有先后顺序，我们将为每个动画添加延迟。和之前运用的方法所不同，我们可以直接通过animation-delay属性来设置animation动画延迟，代码如下：

.icon-suningliujinyun{
-webkit-animation-delay:0s;
animation-delay: 0s;
}
.icon-shousuo{
-webkit-animation-delay:.1s;
animation-delay: .1s;
}
.icon-zhankai{
-webkit-animation-delay:.2s;
animation-delay: .2s;
}
.icon-diaoyonglian{
-webkit-animation-delay:.3s;
animation-delay: .3s;
}
.icon-lingshouyun{
-webkit-animation-delay:.4s;
animation-delay: .4s;
}

在以上代码中，我们设置了5个图标的延迟时间分别为0、0.1、0.2、0.3和0.4s。实际上，延迟0秒为默认值，因此第一个图标实际上也不需要设置延迟代码。测试页面，动画效果如图所示。

里面我刷新了两次，发现最开头，几个图标将在顶部一闪而过。这个算bug

造成这个bug原因：在于除第一个图标外，其余图标都有一定的动画延迟，而在动画没有开始时，图标是没有发生偏移，也是完全不透明的，只有当动画开始的那一瞬间，图标才会切换到完全透明且偏移的动画起始状态。

解决办法：需要使用animation动画的animation-fill-mode属性。这一属性规定了元素在动画时间之外的状态是怎样的。若该值为forwards，则表示动画完成后保留最后一个关键帧中的属性值，该值为backwards时则恰好相反，表示在动画延迟之前就使得元素应用第一个关键帧中的属性值，而该值为both时则表示同时包含forwards和backwards两种设置。在本例中，我们使用backward或both均可，

.close{font-size:0px;/*使span中的文字不显示*/cursor:pointer;/*使鼠标指针显示为手型*/display:inline-block;width:100px;height:100px;line-height:100px;border-radius:50%;/*使背景形状显示为圆形*/background:#FFF;color:#8b8ab3;text-align:center;/**/-webkit-animation: moving 1s linear;animation: moving 1s linear;/*清除抖动*/-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

效果如下图所示：

PS:在animation中也可以像transition动画那样设置速度曲线

比如实现：在本例中我们希望图标的运动带有一点弹性效果，即图标向上运动时，并非减速并停止在终点，而是到达终点后继续向上运动，超过一定距离后再反方向运动回到终点，形成一种往复的效果。

我们当然可以使用帧动画来实现这样的效果，但是如果使用速度曲线将更为简便。要使用自定义曲线，我们往往需要一些工具，因为CSS3动画使用了三次贝塞尔（Cubic Bezier）数学函数来生成速度曲线，而这个函数的参数并不直观。我们可以使用诸如cubic-bezier.com这样的站点来可视化地调整速度曲线。

接下来，我们就能够将该速度曲线写入animation属性的参数中，代码如下：

.close{font-size:0px;/*使span中的文字不显示*/cursor:pointer;/*使鼠标指针显示为手型*/display:inline-block;width:100px;height:100px;line-height:100px;border-radius:50%;/*使背景形状显示为圆形*/background:#FFF;color:#8b8ab3;text-align:center;/**//*-webkit-animation: moving 1s linear;animation: moving 1s linear;*//*cubic-bezier*/ -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);/*清除抖动*/-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

效果如下图所示：

欢迎访问：

1、云商城isv系统http://isv.suningcloud.com/mpisv-web/index

2、云商城消费者门户http://www.suningcloud.com/promotion/index/experience_center.html

转载于:https://www.cnblogs.com/chengxs/p/8067908.html

css3的动画特效--动画序列（animation）相关推荐

html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码
进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了. 要解决这些 ...
html5立体照片墙效果,HTML5特效可以 14种jQuery超酷3D网格照片墙动画特效源码
效果图各位长友大家好, 今天给大家带来的是14种jQuery超酷3D网格照片墙动画特效源码! 大家可以按照自己的意愿做成个人喜欢的样子! 想要文件版源码的,请加穷581549454 废话不多说. ...
特效动画的播放机制，你真的了解吗？
大家好,今天我们来聊一聊关于特效动画的播放机制.满满都是干货,赶紧拿起笔记来划重点吧! 一. 简介动画在2D游戏里用得十分广泛, 根据这些动画的特点,我们可以大概归为3类: 1. 粒子动画这种动画 ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
svg标签的CSS3动画特效 - 经典特效2
svg标签的CSS3动画特效 - 图片上下滚动,会减速相关文献: 什么是svg? svg教程效果图截图: (类似于:上下往复 - 拉锯式运动) css代码如下: <style type=&q ...
svg标签的CSS3动画特效 - 经典特效
svg标签的CSS3动画特效 - 经典特效效果图截图: (类似于:水波荡漾) css代码如下: @charset "UTF-8";svg:not(:root) { overflo ...
CSS3: 常用动画特效及4个最流行的动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

css3的动画特效--动画序列（animation）

css3的动画特效--动画序列（animation）相关推荐

最新文章

热门文章