CODEWITHSUNDEEP
css
VladP
VladP

Reputation: 901

How to make css reverse animation?

I want to animate a DIV element and change it's background and text color. Then change it back to original colors. So CSS below sets background green and text color white. How do I animate switching colors back, e.g. white background and black text? So first 2 seconds it's changing to green/white and next 2 seconds white/black.

.myClass {
    background-color:           #4caf50;
    -webkit-animation-name:     anim1;  /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;     /* Safari 4.0 - 8.0 */
    animation-name:             anim1;
    animation-duration:         2s;
    color:                      white;
    font-weight:                bold;
}

@-webkit-keyframes anim1 {
    from {background-color: white;}
    to {background-color: #4caf50;}
}

@keyframes anim1 {
    from {background-color: white;}
    to {background-color: #4caf50;}
}

Upvotes: 1

Views: 297

Answers (1)

Alireza
Alireza

Reputation: 2449

You can Control your animation with defining percentage for it's @keyframes. change animation duration to 4s and change background-color at 50% and change it back again.

try this:

.myClass {
background-color:           #4caf50;
-webkit-animation-name:     anim1;  /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;     /* Safari 4.0 - 8.0 */
animation-name:             anim1;
animation-duration:         4s;
color:                      white;
font-weight:                bold;
}

@-webkit-keyframes anim1 {
0% {background-color: white;}
50% {background-color: #4caf50;}
100% {background-color: white;}
}

@keyframes anim1 {
0% {background-color: white;}
50% {background-color: #4caf50;}
100% {background-color: white;}
}

Upvotes: 2

Related Questions