Btukfyl

There are 4 text and 8 pictures. One text relate to 2 pictures. The text should change color to red as soon as the picture has changed and remain during 2 pictures and then change color to black again. As soon as 3 picture appears text color is red again until 4 picture etc. I have a problem with timing. How can I set the time in my code?

@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; }

}

this is 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>

Set class to each p and put a diffrent time as below:

See working code

<p class="one">Text1</p>

<p class="two">Text2</p>

css:

p{

    animation-name: color-change

    animation-iteration-count: infinite;

}

.one{

 animation-duration: 3s;

}

.two{

animation-duration: 4s;

}