出处:http://www.cnblogs.com/starof/p/5443445.html
一、最终效果
需求:gift图片的小动画每隔2s执行一次。
需求就一句话,我们看一下实现过程。
二、实现过程
1、网页结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none; color: #fff; font-size: 14px; padding: 10px 12px; width: 100px; position: relative; } .ico { position: absolute; width: 14px; height: 16px; background: url(images/ico.png) no-repeat center; background-size: 100%; position: absolute; top: 4px; right: 27px; } </style> </head> <body> <nav> <a href="javascript:;" class="box"> 一元夺宝 <div class="ico"></div> </a> </nav> </body> </html>
2、原始动画
原始动画效果为:鼠标hover上去出现动画。
动画样式如下:
/*动画*/ .ico:hover{ -webkit-animation: Tada 1s both; -moz-animation: Tada 1s both; -ms-animation: Tada 1s both; animation: Tada 1s both } /*浏览器兼容性部分略过*/ @keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 10%,20% { transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 40%,60%,80% { transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) } }
效果:鼠标hover上去gift图片会动一动。
3、实现变化后的需求
需求变动,要求不再是hover上去展示动画,而是每隔2s展示一次动画。
思路:不需要hover上去出现动画,就把hover去掉,每隔2s显示一次动画,很容易想到延迟2s,然后动画一直执行。
此时相关样式变成:
.ico{ -webkit-animation: Tada 1s 2s both infinite; -moz-animation: Tada 1s 2s both infinite; -ms-animation: Tada 1s 2s both infinite; animation: Tada 1s 2s both infinite; }
但是显示的效果是:页面加载第一次出现动画会延迟2s,后面的动画将不再有延迟。如下,这是不符合需求的。
为了看出效果,下图为延迟6s的效果。
此时换种思路,不要延迟执行动画,而是动画的效果本身就是前2s元素不动,后1s是元素动,然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。
计算一下,原来的百分比节点变成了多少。
将动画总时长变成3s,用计算出的百分比替换原来的百分比,代码如下:
.ico{ -webkit-animation: Tada 3s both infinite; -moz-animation: Tada 3s both infinite; -ms-animation: Tada 3s both infinite; animation: Tada 3s both infinite; } @keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 70%,73%{ transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) } }
效果就是我们期望的了。
完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo of starof</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none; color: #fff; font-size: 14px; padding: 10px 12px; width: 100px; position: relative; } .ico { position: absolute; width: 14px; height: 16px; background: url(images/ico.png) no-repeat center; background-size: 100%; position: absolute; top: 4px; right: 27px; } /*动画*/ .ico{ -webkit-animation: Tada 3s both infinite; -moz-animation: Tada 3s both infinite; -ms-animation: Tada 3s both infinite; animation: Tada 3s both infinite; } @-webkit-keyframes Tada { 0% { -webkit-transform: scale(1); transform: scale(1) } 70%,73% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } @-moz-keyframes Tada { 0% { -moz-transform: scale(1); transform: scale(1) } 70%,73% { -moz-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -moz-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ -moz-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -moz-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } @-ms-keyframes Tada { 0% { -ms-transform: scale(1); transform: scale(1) } 70%,73% { -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93% { -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } @keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 70%,73%{ transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } </style> </head> <body> <nav> <a href="javascript:;" class="box"> 一元夺宝 <div class="ico"></div> </a> </nav> </body> </html>
本文只是介绍一种思路,关于动画各个参数详情可参考:
更多参考:
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
本文转自:CSS3: 动画循环执行(带延迟)的实现
相关推荐
纯CSS3实现汽车行驶动画是一款纯css制作的额汽车行驶特效
微信小程序录音时需要动画,参照网上的安全写了一个,采用纯css的方式动画实现
两款纯css3实现的动画菜单
创建CSS3动画 设置@keyframes动画规则 animation应用动画规则 1 @keyframes规则规定动画的变化状态。 两个状态的效果,应用from,to,from动画开始,to动画结束 多个状态的效果,应用百分比形式,0%动画开始,100%...
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
css3实现动画按钮
css3 鼠标悬停动画,实现了多种悬停后产生不同的动画的效果图
css 3 动画实实现点赞动画,技术栈使用到了css 中的transform这个属性,项目中有需要的修改之处,请即使之处,这里会即使修改,
纯CSS3实现超酷的磁带动画是一款相当震撼逼真的CSS3磁带动画特效。
描述: css3代码与js插件一同实现的loading效果 原理比较简单,效果也比较好看 因使用较少,本案例暂只提供观赏 这里就不解释如何使用了
最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触发放大动画,后来通过查找相关的资料,发现利用css3:@keyframes animation即可实现这个效果,下面来看看详细的介绍吧。 技术重点css3: @...
css3实现转动的齿轮(chrome),涉及css动画、圆角、定位等
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符...CSS3实现的动画效果不错的星级评分效果纯HTML5 CSS3实现一棵自己跳舞的树纯CSS3模拟摩天轮旋转动画效果
jQuery CSS3实现动画相册代码,可以实现单张照片全屏展示,用在个人网站还是不错的,来展示自己的相片,效果会更加美观,php中文网推荐下载!
很久没有向大家分享关于CSS3按钮的动画特效了,今天就给大家带来8款超酷而...3、纯CSS3实现发光动画按钮特效 这是一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排按钮就显得五彩缤纷[......] 阅读全文>>
HTML5CSS3实现大风车旋转动画效果源码下载
素材简介:CSS3实现3D螺旋动画特效是一款基于html5 css3实现的螺旋动画特效。
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效