Timing animation on CSS

Question

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>

`animation: color-change 1s infinite;` set instead `1s` what time you want... or here `animation-duration: 24s;` — לבני מלכה, Nov 27 '18 at 10:58
@לבנימלכה but this is general animation-duration, I need to set for each `p` — Juicy134, Nov 27 '18 at 11:01

לבני מלכה · Answer 1 · 2018-11-27T12:01:32.700

0

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

edited Nov 27 '18 at 12:01

answered Nov 27 '18 at 11:06

לבני מלכה

15,925
2
23
47

So, I need to add it in my code, that`s it? – Juicy134 Nov 27 '18 at 11:56
Add it instead your `p{...}` – לבני מלכה Nov 27 '18 at 11:57
https://jsfiddle.net/Lkjmtn5q/ – לבני מלכה Nov 27 '18 at 12:01
text changes its color before image change, I need to reverse. when image change, text change to another color – Juicy134 Nov 27 '18 at 12:03

Timing animation on CSS

1 Answers1