Html CSS上的定时动画

有4个文本和8个图片。一个文本与两个图片相关。图片更改后，文本应立即变为红色，并在两张图片中保持不变，然后再次变为黑色。当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>

Text1

文本2

文本3

文本4

将

类

设置为每个

p

并设置不同的时间，如下所示：

---

动画：颜色变化1s无限改为设置
1s
您想要的时间。。。或此处
动画持续时间：24秒但这是一般的动画持续时间，我需要为每个
p
设置，不要发布重复的问题。所以，我需要在我的代码中添加它，就是这样吗？添加它，而不是你的
p{…}
文本在图像更改之前更改其颜色，我需要反转。图像更改时，文本将更改为另一种颜色
<p class="one">Text1</p>
<p class="two">Text2</p>

p{
    animation-name: color-change
    animation-iteration-count: infinite;
}
.one{
 animation-duration: 3s;
}
.two{
animation-duration: 4s;
}