CODEWITHSUNDEEP
htmlcssanimationcss-transitions
Shamoon
Shamoon

Reputation: 43491

How can I change the color of text with a CSS transition?

I have some text:

<span class='my-class'>Some text</span>

I want the text to start out green then (in 10 seconds), turn to blue. I don't want it to trigger on a hover or anything, but rather as soon as the element with the class exists.

Upvotes: 0

Views: 8249

Answers (3)

mkafiyan
mkafiyan

Reputation: 954

you can see how color change with adding transition duration or transition delay. it works with even 3 colors. if you want to change to 2 color you can easly delete 50% {color:blue;}.

using duration and delay is another way that I mention it before but using @-webkit-keyframes and % is more flexible.

HTML codes

<span class='my-class'>Some text</span>

css code:

.my-class {
    -webkit-animation:name 2s infinite;
}

@keyframes name {
    0% {color:magenta;}
    50% {color:blue;}
    100%{color:green}
}

and this is the jsfiddle link sample

Upvotes: 4

Always Helping
Always Helping

Reputation: 14570

You can simply do this by using animation and using animation-delay: 10s; and also keyframes to change colors - NO hovers

It will start from green and after 10 seconds it will turn blue as you wanted.

Run snippet below.

.my-class {
  animation-name: blue;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-delay: 10s;
  font-size: 4em;
  color: green;
}

@keyframes blue {
    to { color: blue; }
}
<span class='my-class'>Some text </span> 
<small>I will turn blue in 10 seconds </small>

Upvotes: 1

ximewatch
ximewatch

Reputation: 73

As per your question, it takes 10s to go from green to blue.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<span class='my-class'>Some text</span>
</body>
</html>

CSS:

.my-class{
animation-delay:8s;
  animation-name: color;
  animation-duration: 2s;
color:green;
animation-fill-mode: forwards;  

}
@keyframes color {
  from {color: green;}
  to {color: blue;}
}

#Demo https://jsbin.com/zusihologo/edit?css

Upvotes: 0

Related Questions