css3的动画特效之动画序列(animation)


Posted in HTML / CSS onDecember 22, 2017

首先复习一下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;
}

初始化的时候展示,如下图所示;

css3的动画特效之动画序列(animation)

接下来,为图标添加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秒为默认值,因此第一个图标实际上也不需要设置延迟代码。测试页面,动画效果如图所示。

css3的动画特效之动画序列(animation)

里面我刷新了两次,发现最开头,几个图标将在顶部一闪而过。这个算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; 
}

效果如下图所示:

css3的动画特效之动画序列(animation)

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; 
}

效果如下图所示:

css3的动画特效之动画序列(animation)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 #HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 #HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 #HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 #HTML / CSS
You might like
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php动态变量定义及使用
2015/06/10 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
django 常用orm操作详解
2017/09/13 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
服务员自我评价
2014/01/25 职场文书
学习之星事迹材料
2014/05/17 职场文书
兽医医药专业求职信
2014/07/27 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书