循环使用CSS3更改文本颜色的动画 [英] Looping Animation of text color change using CSS3

问题描述

我有文字，我想动画。

这是我的CSS代码到目前为止：

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

解决方案

使用 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

这篇关于循环使用CSS3更改文本颜色的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！