Lặp hoạt ảnh thay đổi màu văn bản bằng cách sử dụng CSS3

Question

Tôi có văn bản mà tôi muốn tạo hiệu ứng động. Không phải trên di chuột, ví dụ nhưng liên tục thay đổi từ từ từ màu trắng sang màu đỏ và sau đó trở lại màu trắng một lần nữa.

Đây là mã của tôi CSS cho đến nay:

#countText{ 
    color: #eeeeee; 
    font-family: "League Gothic", Impact, sans-serif; 
    line-height: 0.9em; 
    letter-spacing: 0.02em; 
    text-transform: uppercase; 
    text-shadow: 0px 0px 6px ; 
    font-size: 210px; 
} 

Answer 1

Sử dụng keyframes và animation tài sản

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p> 

CSS

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

DEMO

Answer 2

Một SampleL

HTML:

<div class='center'> 

    <p class="awesome">ISN'T THIS AWESOME!</p> 

</div> 

CSS:

.center { 

margin: 0 auto; 

} 

.awesome { 

    font-family: futura; 
    font-style: italic; 

    width:100%; 

    margin: 0 auto; 
    text-align: center; 

    color:#313131; 
    font-size:45px; 
    font-weight: bold; 
    position: absolute; 
    -webkit-animation:colorchange 20s infinite alternate; 


} 

@-webkit-keyframes colorchange { 
    0% { 

    color: blue; 
    } 

    10% { 

    color: #8e44ad; 
    } 

    20% { 

    color: #1abc9c; 
    } 

    30% { 

    color: #d35400; 
    } 

    40% { 

    color: blue; 
    } 

    50% { 

    color: #34495e; 
    } 

    60% { 

    color: blue; 
    } 

    70% { 

    color: #2980b9; 
    } 
    80% { 

    color: #f1c40f; 
    } 

    90% { 

    color: #2980b9; 
    } 

    100% { 

    color: pink; 
    } 
} 

ref: https://codepen.io/raaasin/pen/quvHr