practice_08.css

/* div{
    height: 100px;
    width: 100px;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100px;
    left: 100px;
} */
/* div:hover { */
    /* background-color: white; */
    /* after move the corser to the div point color will change */
    /* transition-duration: 2s;
    transition-timing-function: steps(5);
    transition-delay: 0.5s; */
    /* transition: all 2s ease-in 0.5s;
    transform: rotate(90deg); */
/* }  */
/* div:active { */
    /* background-color: pink; */
    /* after clicking color will be change */
/* } */
.hello {
    background-color: black;
    color: white;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
/* .hello:hover {
    background-color: white;
    transition-duration: 5s;
    transition-delay: 0.25s;
    transform: translate(100px,50px);
    transform: skew(90deg);

} */
/* @keyframes colorAnimation {
    from {
        background-color: black;
    }
    to {
        background-color: white;
    }
} */
@keyframes colorAnimation {
    0%{
        background-color: black;
    }
    50% {
        background-color: white;
    }
    100% {
        background-color: black;
    }
}
.hello:hover {
    /* animation-name: colorAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: 5;
    animation-direction: reverse; */
    animation: colorAnimation 2s ease-in 0.25s infinite normal ;
}