Search code examples
htmlcsstransition

CSS suddenly transition out

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

Solution

  • 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;

}