您好,欢迎来到小侦探旅游网。
搜索
您的当前位置:首页css3实现循环执行动画,且动画每次都有延迟-starof

css3实现循环执行动画,且动画每次都有延迟-starof

来源:小侦探旅游网

一、最终效果

需求:gift图片的小动画每隔2s执行一次。

需求就一句话,我们看一下实现过程。

二、实现过程

1、网页结构




 
 Document
 



 


View Code

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

效果就是我们期望的了。

完整代码如下:




 
 demo of starof
 



 


View Code

本文只是介绍一种思路,关于动画各个参数详情可参考:

css3中变形与动画(一)

css3中变形与动画(二)

css3中变形与动画(三)

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论,共同进步。

Copyright © 2019- xiaozhentang.com 版权所有 湘ICP备2023022495号-4

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务