Как остановить css анимацию?

Question

[Александр Ружевич]

Доброго всем дня, впервые столкнулся с css анимацией. вроде бы все работает, но она бегает по кругу а мне нужно что бы после показа последнего слайда она остановилась. Ну или как я пробовал остановить на 14-й секунде. Понимаю что вопрос мелочный, и ошибка перед носом, тыкните неопытного)

<div>
<img src="1.jpg" class="slide" style="width:100%;" alt="" />
<img src="2.jpg" style="width:100%;" class="slide" alt="" />
<img src="3.jpg" style="width:100%;" class="slide" alt="" />
<img src="4.jpg" class="slide" style="width:100%;" alt="" />
<img src="5.jpg" style="width:100%;" class="slide" alt="" />
<img src="6.jpg" style="width:100%;" class="slide" alt="" />
<img src="7.jpg" style="width:100%;" class="slide" alt="" />
</div>




<style>


#fade{
animation:fade  14s infinite paused;
	-webkit-animation:fade 14s infinite paused;
}
.slide {
    position:absolute;

}

.slide:nth-child(1) {
    -webkit-animation: fade 14s 0s infinite;
    z-index:60;
}

.slide:nth-child(2) {
    -webkit-animation: fade 14s 2s infinite;
    z-index:50;
}

.slide:nth-child(3) {
    -webkit-animation: fade 14s 4s infinite;
    z-index:40;
}

.slide:nth-child(4) {
    -webkit-animation: fade 14s 6s infinite; 
    z-index:30;
}

.slide:nth-child(5) {
    -webkit-animation: fade 14s 8s infinite; 
    z-index:25;
}

.slide:nth-child(6) {
    -webkit-animation: fade 14s 10s infinite; 
    z-index:20;
}

.slide:nth-child(7) {
    -webkit-animation: fade 14s 12s infinite; 
    z-index:10;

}

@-webkit-keyframes fade {



    0%{
      opacity: 1;
   }
   15% {
      opacity:1;
   }
   25%{
      opacity: 0;
   }
   
   
   90% {
      opacity:0;
   }
   100% {
      opacity:1;
   }

}
</style>

Comments

[Lynn «Кофеман»]

https://developer.mozilla.org/ru/docs/Web/CSS/anim...

[Александр Ружевич]

Алексей Тен: спасибо что откликнулись, она проигрывается уже один раз но останавливается на первом кадре а мне нужно на последнем)

[Lynn «Кофеман»]

https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Answer 1

[kravchenko-me]

она проигрывается уже один раз но останавливается на первом кадре а мне нужно на последнем)

Если правильно понял вам нужно forwards - www.w3schools.com/cssref/css3_pr_animation-fill-mo...

Comments

[Александр Ружевич]

все равно на первом останавливается(

[Александр Ружевич]

понимаю вопрос глупый, но я устал с ней играться, глядя на мой код скажите к какому именно элементу нужно применять свойство анимации, а то я уже его куда хочешь ставил, ноль эмоций, анимация не слушается

div {
-webkit-animation: fade 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: fade 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

#fade{
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
.slide {
position:absolute;
-webkit-animation: fade 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: fade 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

[kravchenko-me]

codepen.io/anon/pen/wMVYxG - этот эффект нужен?

[Александр Ружевич]

kravchenko-me: да, спасибо огромное, помогли)

[kravchenko-me]

пожалуйста)
отметьте тогда мой ответ, как решение вопроса)

[Александр Ружевич]

kravchenko-me: готово)

Answer 2

[GreatRash]

А infinite для чего у вас стоит? ;)

Comments

[Александр Ружевич]

спасибо что откликнулись, infinite убрал, теперь анимация пройдя один раз останавливается на первом кадре, а мне нужно на последнем)

и еще, вот есть у меня анимация с названием fade, куда писать все свойства этой анимации будь то количество повторов и продолжительность? то есть как к примеру остановить ее на 13-й секунде навсегда?)

div {


}

#fade{

}
.slide {
position:absolute;

}

.slide:nth-child(1) {
-webkit-animation: fade 14s 0s ;
z-index:60;
}

.slide:nth-child(2) {
-webkit-animation: fade 14s 2s;
z-index:50;
}

.slide:nth-child(3) {
-webkit-animation: fade 14s 4s;
z-index:40;
}

.slide:nth-child(4) {
-webkit-animation: fade 14s 6s ;
z-index:30;
}

.slide:nth-child(5) {
-webkit-animation: fade 14s 8s;
z-index:25;
}

.slide:nth-child(6) {
-webkit-animation: fade 14s 10s ;
z-index:20;
}

.slide:nth-child(7) {
-webkit-animation: fade 14s 12s ;
z-index:10;

}

@-webkit-keyframes fade {

0%{
opacity: 1;
}
15% {
opacity:1;
}
25%{
opacity: 0;
}


90% {
opacity:0;
}
100% {
opacity:1;
}

}

Answer 3

[westdp]

-webkit-animation: fade 14s 2s infinite;

www.w3schools.com/cssref/css3_pr_animation-iterati...
https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Comments

[Александр Ружевич]

можно ли задать разное время показа слайдов? задать последнему к примеру 2 часа?