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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现实时监控文件的方法
2016/08/26 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python sys模块常用方法解析
2020/02/20 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
运动会开幕词
2015/01/28 职场文书
党员发展大会主持词
2015/07/03 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
python中如何对多变量连续赋值
2021/06/03 Python