0

Click me for more information

when the mouse icon is moved away from the element, element suddenly returns to original state

(I showed it in the video)

.productinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1%;
    margin-top: 3%;
    color: #ff0062;
    flex: 0 0 25%;
    border: 3px solid #FF00FF;
    transition: 1ms;
}

.productinfo:nth-child(-n+3) {
    margin-top: 1%;
}

.productinfo:hover {
    animation: changeColor 3s, changefontsize 5s forwards;
}

@keyframes changeColor{
    33%{border-top: 3px solid #4281A4;}
    66%{border-right: 3px solid #4281A4;}
    66%{border-left: 3px solid #4281A4;}    
    100%{border-bottom: 3px solid #4281A4;}
}


@keyframes changefontsize{
    0%{font-size: 5;}
    25%{font-size: 10;}
    50%{font-size: 15;}    
    100%{font-size: 25px;}
}

This is my current code

mrdenizlp
  • 78
  • 14
  • 2
    Transitions are not reversed on mouse out. You should use something like jQuery animations. Or you can use a "mouse-out" animation, [like some people recommend over here](https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover). – Nakarukatoshi Uzumaki Aug 10 '21 at 19:39
  • can you provide a working example as a snippet? – vanowm Aug 10 '21 at 20:38

1 Answers1

1

Does this approach based on CSS transitions do what you want (only showing added/changed code)?

.productinfo {
    transition: border 3s linear, font-size 5s linear;
}

.productinfo:hover {
    border: 3px solid #4281A4;
    font-size: 25px;

}
daudprobst
  • 132
  • 8