[英]CSS Animation Delay and Keyframe
I have a problem with animation delay on CSS Animation. 我对CSS动画的动画延迟有问题。 I have 3 images and I want to make it slideshow.
我有3张图片,我想幻灯片播放。 The illustrations is, image 1 to image 2 takes 15 seconds to change and image 2 to image 3 takes 15 seconds to change and image 3 back to image 1 it takes 30 seconds, after the first loop, I want to make the slideshow end in image 3 so image 1 to image 2 still 15 seconds and image 2 to image 3 still 15 seconds and when image 3 load it no need to back to image 1. I tried this code but it gives me 15 seconds delay to all images.
插图是,图像1到图像2需要15秒才能改变,图像2到图像3需要15秒才能改变,图像3要回到图像1需要30秒,在第一次循环之后,我想让幻灯片结束图像3使图像1到图像2仍然是15秒,图像2到图像3仍然是15秒,当图像3加载时,无需返回到图像1.我尝试了这个代码,但它给了我15秒的延迟到所有图像。 This is my code :
这是我的代码:
ul { list-style: none; margin: 0; padding: 0; position: relative; } li { position: absolute; opacity:0; } li { animation: xfade 45s infinite; } li:nth-child(2) { animation-delay:15s; } li:nth-child(3) { animation-delay:30s; } @keyframes xfade{ 3%{opacity:1} 33% {opacity:1;} 36%{opacity:0} }
<ul> <li><img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> <li><img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> <li><img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> </ul>
I want to make delay in my animation according the illustrations above. 我想根据上面的插图延迟我的动画。 Anyone could help me solve this problem ?
任何人都可以帮我解决这个问题? Thank you before.
谢谢你。
I am thinking that using GreenSock is better if you want animation with specific scenario like this. 我想如果你想要像这样的特定场景的动画,使用GreenSock会更好。
Here is the closest I can get with HTML and CSS, I also need to duplicate the <li>
to fit your scenario. 这是我用HTML和CSS最接近的,我还需要复制
<li>
以适合您的场景。
ul { list-style: none; margin: 0; padding: 0; position: relative; } li { position: absolute; opacity: 0; } li:nth-child(6) { /*The last item always on the top, direction will goes from last to first*/ animation: xfade 15s; } li:nth-child(5) { /*Put animation length double the delay (in this case delay is the actual animation length)*/ animation: xfade 30s 15s; } li:nth-child(4) { animation: xfade 30s 15s; } li:nth-child(3) { animation: xfade 30s 15s; } li:nth-child(2) { animation: xfade 30s 15s; } li:nth-child(1) { opacity: 1; } @keyframes xfade{ 0%{opacity:0} 33% {opacity:1;} 100%{opacity:0} }
<ul> <li>1<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> <li>2<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> <li>3<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> <!-- Duplicate --> <li>4<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> <li>5<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> <li>6<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> </ul>
Here's something that gave real food for thought :) 这里有一些让人深思的东西:)
I had to apply 2 animations for opacity change: xfade-25pct
and xfade-50pct
. 我不得不为不透明度变化应用2个动画:
xfade-25pct
和xfade-50pct
。 Both play only 2 times, fading out briefly after 25% and 50% of the animation. 两者都只播放了2次,在动画的25%和50%后短暂淡出。 And an additional
show
animation to make the 3rd image stick after 2 animation loops, with the necessary rule animation-fill-mode: forwards;
和一个额外的
show
动画制作第三图像后贴2个动画循环,必要的规则animation-fill-mode: forwards;
. 。
The trick to opacity is this: you have to split the animation in 4 quarters. 不透明的技巧是这样的:你必须在4个季度中分割动画。 If you want you can change the total animation duration from
60s
to a multiple of 4, and adjust the delays. 如果需要,您可以将总动画持续时间从
60s
更改为4的倍数,并调整延迟。 The 3rd animation delay is the double of the 2nd one. 第3个动画延迟是第2个动画延迟的两倍。
----#----#----#----#----#----#----#----#----#----#
1st animation | 1st animation |
--------------------------------------------------
15s | 2nd animation | 2nd animation |
--------------------------------------------------
30s | 3rd animation | 3rd animation |
----#----#----#----#----#----#----#----#----#----#
Feel free to ask. 随意问。 Hope this helps you.
希望这对你有所帮助。
var s = 0, c = 1; /* Code for displaying timer */ window.setInterval(function() { s++; document.querySelector('DIV').innerHTML = s; if (s == 15 && c <= 2 || s == 30) { if (s == 30) { c = 1; } else { c++; } s = 0; } }, 1000);
ul { list-style: none; margin: 0; padding: 0; position: relative; } li { position: absolute; opacity: 0; } li { animation: xfade-25pct 60s 2; } li:nth-child(2) { animation-delay: 15s; } li:nth-child(3) { animation-delay: 30s, 120s; animation-name: xfade-50pct, show; animation-duration: 60s, 1s; animation-iteration-count: 2, 1; animation-fill-mode: forwards; } @keyframes xfade-25pct { 0% { opacity: 0; } 2%, 25% { opacity: 1; } 27% { opacity: 0; } } @keyframes xfade-50pct { 0% { opacity: 0; } 2%, 50% { opacity: 1; } 52% { opacity: 0; } } @keyframes show { 0%, 100% { opacity: 1; } }
<DIV></DIV> <ul> <li><img width="500" height="500" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="pic1"></li> <li><img width="500" height="500" src="http://whc.unesco.org/uploads/thumbs/news_920-500-500-20151015155516.jpg" alt="pic2"></li> <li><img width="500" height="500" src="https://i.pinimg.com/736x/4c/17/65/4c176537aee906de294138c3bac5b8f5--merry-christmas-love-coffee-aroma.jpg" alt="pic3"></li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.