且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

循环使用CSS3更改文本颜色的动画

更新时间:2022-10-21 20:36:56

使用 HTML p>

 < 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


I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again.

Here is my CSS code so far:

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

Use keyframes and animaiton property

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