1

Как сделать чтобы после последнего элемента снова появлялся первый за ним второ и т.д. https://jsfiddle.net/3cthur08/

*{
 box-sizing:border-box;
}
@keyframes c1 {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
div{
	position:relative;
	width:500px;
    height: 236px;
    border: 1px black solid;
}
p{
    position: absolute;
    width:100%;
    height:100%;
}
.q1{
    animation: c1 3s 12s;
    animation-fill-mode: forwards;
    background:red;
}
.q2{
    animation: c1 3s 9s;
    animation-fill-mode: forwards;
    background:blue;
}
.q3{
    animation: c1 3s 6s;
    animation-fill-mode: forwards;
    background:green;
}
.q4{
    animation: c1 3s 3s;
    animation-fill-mode: forwards;
    background:black;
}
.q5{
    animation: c1 3s;
    animation-fill-mode: forwards;
    
    background:gray;
}
<div class="container">
<p class="q1"></p>
<p class="q2"></p>
<p class="q3"></p>
<p class="q4"></p>
<p class="q5"></p>
</div>

1 ответ 1

2

Нужно 100% разделить на количество кадров, в моём примере 5 картинок значит 100/5=20%(время смены кадра)

*{
 box-sizing:border-box;
}
@keyframes c1 {
    0%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    80%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
div{
	position:relative;
	width:500px;
    height: 236px;
    border: 1px black solid;
}
p{
    position: absolute;
    width:100%;
    height:100%;
}
.q1{
    animation: c1 15s 12s infinite;
    background:red;
}
.q2{
    animation: c1 15s 9s infinite;
    background:blue;
}
.q3{
    animation: c1 15s 6s infinite;
    background:green;
}
.q4{
    animation: c1 15s 3s infinite;
    background:black;
}
.q5{
    animation: c1 15s infinite;
    background:gray;
}
<div class="container">
<p class="q1"></p>
<p class="q2"></p>
<p class="q3"></p>
<p class="q4"></p>
<p class="q5"></p>
</div>

1
  • Вы можете принять текущий ответ (галка слева от поста) если он вас устраивает: при этом неважно, что вы сами ответили на свой вопрос
    – A K
    16 дек 2016 в 19:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.