CSS动画延迟和关键帧 [英] CSS Animation Delay and Keyframe
问题描述
我对CSS动画的动画延迟有问题。我有3个图像，我想让它幻灯片。插图是，图像1到图像2需要15秒来改变，图像2到图像3需要15秒来改变，图像3回到图像1需要30秒，在第一次循环后，我想让幻灯片放映结束图像3所以图像1到图像2仍然是15秒，图像2到图像3仍然是15秒，当图像3加载时不需要返回到图像1.我试过这个代码，但是它给我所有图像15秒的延迟。这是我的代码：
ul {list-style：none;保证金：0;填充：0;位置：相对; } li {position：absolute;不透明度：0; } li {动画：xfade 45s无限; } li：nth-child（2）{animation-delay：15s; } li：第n个孩子（3）{动画延迟：30s; } @keyframes xfade {3％{opacity：1} 33％{opacity：1;} 36％{opacity：0}}
< ul> < li>< img width =500height =500src =http://lorence.co.jp//< / li> < li>< img width =500height =500src =http://lorence.blogspot.com/500/peoplealt =pic2>< / li> < li>< img width =500height =500src =http://lorence.co.jp//< / li> < / $>
我想延迟动画根据上面的插图。任何人都可以帮我解决这个问题？
这里给出了真正想到的食物：
我必须为不透明度更改应用2个动画： xfade-25pct 和 xfade-50pct 。两者都只播放2次，在25％和50％的动画之后短暂淡出。另外还有一个显示动画，可以在2个动画循环后制作第三张图片，并且必要的规则 animation-fill-mode：forwards; 。
不透明度的技巧是：你必须在4个季度内分割动画。如果您愿意，您可以将总动画持续时间从 60s 更改为4的倍数，并调整延迟。第三次动画延迟是第二次动画延迟的两倍。
----＃---- ---- ---- ＃----＃----＃----＃----＃----＃----＃----＃
第一个动画|第一部动画|
---------------------------------------------- ----
15s |第二动画|第二动画|
---------------------------------------------- ----
30s |第3个动画|第3个动画|
----＃----＃----＃----＃----＃----＃----＃----＃----＃ - ---＃
随意问。希望这可以帮助你。
var s = 0，c = 1; / *显示定时器的代码* / 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;保证金：0;填充：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;动画名称：xfade-50pct，show;动画持续时间：60s，1s; animation-iteration-count：2，1; animation-fill-mode：forwards;} @关键帧xfade-25pct {0％{opacity：0; } 2％，25％{不透明度：1; } 27％{不透明度：0; }} @关键帧xfade-50pct {0％{opacity：0; } 2％，50％{不透明度：1; } 52％{opacity：0; }} @关键帧显示{0％，100％{不透明度：1; }}
< DIV>< / DIV>< ; UL> < li>< img width =500height =500src =https://www.noao.edu/image_gallery/images/d2/pelican_500.jpgalt =pic1>< /李> < li>< img width =500height =500src =http://whc.unesco.org/uploads/thumbs/news_920-500-500-20151015155516.jpgalt =pic2> ;< /锂> < li>< img width =500height =500src =https://i.pinimg.com/736x/4c/17/65/4c176537aee906de294138c3bac5b8f5--merry-christmas-love-coffee-aroma .jpgalt =pic3>< / li>< / ul>
I have a problem with animation delay on CSS Animation. I have 3 images and I want to make it slideshow. 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. 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.
Here's something that gave real food for thought :)
I had to apply 2 animations for opacity change: xfade-25pct and xfade-50pct. Both play only 2 times, fading out briefly after 25% and 50% of the animation. And an additional show animation to make the 3rd image stick after 2 animation loops, with the necessary rule animation-fill-mode: forwards;.
The trick to opacity is this: you have to split the animation in 4 quarters. If you want you can change the total animation duration from 60s to a multiple of 4, and adjust the delays. The 3rd animation delay is the double of the 2nd one.
----#----#----#----#----#----#----#----#----#----#
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>
这篇关于CSS动画延迟和关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
