Looping Animation of text color change using CSS3
11
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;
}
css css3 transition css-animations
edited Jan 25 '17 at 2:32
Walf
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
add a comment |
11
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;
}
css css3 transition css-animations
edited Jan 25 '17 at 2:32
Walf
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
1
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
1
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44
add a comment |
11
11
11
3
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;
}
css css3 transition css-animations
edited Jan 25 '17 at 2:32
Walf
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
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;
}
css css3 transition css-animations
css css3 transition css-animations
edited Jan 25 '17 at 2:32
Walf
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
edited Jan 25 '17 at 2:32
Walf
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
edited Jan 25 '17 at 2:32
Walf
4,46512343
edited Jan 25 '17 at 2:32
Walf
4,46512343
edited Jan 25 '17 at 2:32
Walf
4,46512343
4,46512343
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
asked May 28 '13 at 1:18
Alex JjAlex Jj
37391228
37391228
1
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
1
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44
add a comment |
1
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
1
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44
1
1
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
1
1
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44
add a comment |
2 Answers
2
active
oldest
votes
25
Use keyframes and animation 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
edited Sep 20 '17 at 17:29
albert
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
2
You're welcome :) You can do many cool things withanimation. Read this.
– Sourabh
May 28 '13 at 1:47
add a comment |
0
Another 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
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16782498%2flooping-animation-of-text-color-change-using-css3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
25
Use keyframes and animation 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
edited Sep 20 '17 at 17:29
albert
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
2
You're welcome :) You can do many cool things withanimation. Read this.
– Sourabh
May 28 '13 at 1:47
add a comment |
25
Use keyframes and animation 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
edited Sep 20 '17 at 17:29
albert
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
2
You're welcome :) You can do many cool things withanimation. Read this.
– Sourabh
May 28 '13 at 1:47
add a comment |
25
25
25
Use keyframes and animation 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
edited Sep 20 '17 at 17:29
albert
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
Use keyframes and animation 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
edited Sep 20 '17 at 17:29
albert
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
edited Sep 20 '17 at 17:29
albert
7,29133356
edited Sep 20 '17 at 17:29
albert
7,29133356
edited Sep 20 '17 at 17:29
albert
7,29133356
7,29133356
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
answered May 28 '13 at 1:28
SourabhSourabh
4,44463272
4,44463272
2
You're welcome :) You can do many cool things withanimation. Read this.
– Sourabh
May 28 '13 at 1:47
add a comment |
2
You're welcome :) You can do many cool things withanimation. Read this.
– Sourabh
May 28 '13 at 1:47
2
2
You're welcome :) You can do many cool things with
animation. Read this.– Sourabh
May 28 '13 at 1:47
You're welcome :) You can do many cool things with
animation. Read this.– Sourabh
May 28 '13 at 1:47
add a comment |
0
Another 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
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
add a comment |
0
Another 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
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
add a comment |
0
0
0
Another 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
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
Another 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
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
answered Jun 14 '17 at 8:20
Omar MughrabiOmar Mughrabi
11
11
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
add a comment |
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
– thewaywewere
Jun 14 '17 at 8:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16782498%2flooping-animation-of-text-color-change-using-css3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
– Musa
May 28 '13 at 1:23
Thank you so much. Such a good source.
– Alex Jj
May 28 '13 at 1:44
1
@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values.
– Volker E.
May 28 '13 at 1:44