Css transition not working with css animation

Question

i have simple animation on div which change background-color on :hover, but, when mouse leave this div, the transition with initial color is not working

if someone has css or javascript solution it is welcome !

.arc_en_ciel{
    width: 300px;
    height: 300px;
    background-color: rgb(64, 137, 126);

    -webkit-transition: background-color 0.7s ease-in-out;
    -moz-transition: background-color 0.7s ease-in-out;
    -o-transition: background-color 0.7s ease-in-out;
    transition: background-color 0.7s ease-in-out;
}

.arc_en_ciel:hover{
    animation-name: animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}
@-webkit-keyframes animation{
    0%     {background-color: rgb(64, 137, 126);}
    50%  {background-color: #1f5e54;}
    100%  {background-color: rgb(64, 137, 126);}
}
@keyframes animation{
    0%     {background-color: rgb(64, 137, 126);}
    50%  {background-color: #1f5e54;}
    100%  {background-color: rgb(64, 137, 126);}
}

<div class="arc_en_ciel"></div>

Welcome to Stack Overflow! Without your HTML, CSS is useless to us. Please read how to create a minimal reproducible example. — disinfor
– disinfor, Commented May 19, 2021 at 22:01
animation is a reserved word in CSS, try renaming your animation something unique. — serraosays
– serraosays, Commented May 19, 2021 at 22:08
Do you mean transition doesn't work when color changing from default to color of animation and vise versa? (your color pallet is so subtle, very hard to see the difference, try more contrast colors) — vanowm
– vanowm, Commented May 20, 2021 at 2:00

Dan Mullin · Accepted Answer · 2021-05-20 02:00:21Z

2

The problem is that CSS animation animates the background color, but doesn't change the value.

There is no transition once you stop hovering because the color is the same.

You may get what you're looking for with a simple transition:

.arc_en_ciel{
    width: 300px;
    height: 300px;
    background-color: rgb(64, 137, 126);
    transition: background-color 0.7s ease-in-out;
}

.arc_en_ciel:hover{
    background-color: #1f5e54;
    transition: background-color 0.7s ease-in-out;
}

<div class="arc_en_ciel"></div>

answered May 20, 2021 at 2:00

Dan Mullin

4,4483 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css transition not working with css animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related