CODEWITHSUNDEEP
javascripthtmlcssanimationcss-transitions
Martin
Martin

Reputation: 79

Css transition not working with css animation

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>

Upvotes: 2

Views: 4922

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4435

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>

Upvotes: 2

Related Questions