Синхронизация анимации на CSS [дубликат]

Juicy134 спросил: 03 ноября 2018 в 09:10 в: html

На этот вопрос уже есть ответ:

  • Looping Animation of text color change using CSS3 2 ответа

Есть 4 текста и 8 изображений. Один текст относится к 2 картинкам. Текст должен изменить цвет на красный, как только изображение изменилось, и остаться в течение 2 изображений, а затем снова изменить цвет на черный. Как только появляется 3 изображения, цвет текста снова становится красным до 4 изображений и т. Д. У меня проблема с синхронизацией. Как установить время в моем коде?

@keyframes fadeIm-1
{
    from    { opacity: 1; }
    16%     { opacity: 1; }
    25%     { opacity: 0; }
    91%     { opacity: 0; }
    to      { opacity: 1; }
}@keyframes fadeIm-2
{
    from    { opacity: 0; }
    16%     { opacity: 0; }
    25%     { opacity: 1; }
    41%     { opacity: 1; }
    50%     { opacity: 0; }
    to      { opacity: 0; }
}@keyframes fadeIm-3
{
    from    { opacity: 0; }
    41%     { opacity: 0; }
    50%     { opacity: 1; }
    66%     { opacity: 1; }
    75%     { opacity: 0; }
    to      { opacity: 0; }
}@keyframes fadeIm-4
{
    from    { opacity: 0; }
    66%     { opacity: 0; }
    75%     { opacity: 1; }
    91%     { opacity: 1; }
    to      { opacity: 0; }
}@keyframes fadeIm-5{
    from    { opacity: 1; }
    16%     { opacity: 1; }
    25%     { opacity: 0; }
    91%     { opacity: 0; }
    to      { opacity: 1; }
}@keyframes fadeIm-6
{
    from    { opacity: 0; }
    16%     { opacity: 0; }
    25%     { opacity: 1; }
    41%     { opacity: 1; }
    50%     { opacity: 0; }
    to      { opacity: 0; }
}@keyframes fadeIm-7
{
    from    { opacity: 0; }
    41%     { opacity: 0; }
    50%     { opacity: 1; }
    66%     { opacity: 1; }
    75%     { opacity: 0; }
    to      { opacity: 0; }
}@keyframes fadeIm-8
{
    from    { opacity: 0; }
    66%     { opacity: 0; }
    75%     { opacity: 1; }
    91%     { opacity: 1; }
    to      { opacity: 0; }
}.div-style
{
    position: relative; 
    text-align: center; 
    width: 99%; 
}.img-style
{
    width: 33.3%;
    margin-top: 8px;
    border: 1px solid #0000ff;    
    animation-duration: 24s;
    animation-iteration-count: infinite;
}
.img-style.next
{
    position: absolute;
    left: 33.3%;
    opacity: 0;
}
.img-style.im-1
{ 
    animation-name: fadeIm-1;
}
.img-style.next.im-2
{ 
    animation-name: fadeIm-2;
}
.img-style.next.im-3
{
    animation-name: fadeIm-3;
}
.img-style.next.im-4
{
    animation-name: fadeIm-4;
}   
.img-style.next.im-5
{
    animation-name: fadeIm-5;
}   
.img-style.next.im-6
{
    animation-name: fadeIm-6;
}   
.img-style.next.im-7
{
    animation-name: fadeIm-7;
}
.img-style.next.im-8
{
    animation-name: fadeIm-8;
}
p{
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
}@-webkit-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-moz-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-ms-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-o-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

это html:

<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
<p>Text4</p><div class="div-style">
    <img src="img/1.png" title="Image 1" class="img-style im-1">
    <img src="img/5.png" title="Image 2" class="img-style next im-2">
    <img src="img/8.png" title="Image 3" class="img-style next im-3">
    <img src="img/9.png" title="Image 4" class="img-style next im-4">
    <img src="img/11.png" title="Image 4" class="img-style next im-5">
    <img src="img/16.png" title="Image 4" class="img-style next im-6">
    <img src="img/5.png" title="Image 4" class="img-style next im-7">
    <img src="img/8.png" title="Image 4" class="img-style next im-8">
</div>

0 ответов