CSS TRANSITION PROPERTY

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS LEVEL 5</title>
    <link rel="stylesheet" href="STLE.CSS">
</head>
<body>
    <div>This is a box</div>
</body>

</html> 


CSS


div{
    height: 100px;
    width: 100px;
    background-color: aqua;
    border: 2px solid gold;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: steps(2);
}
div:hover{
    background-color: red;
    color: aliceblue;
    font-size: 20px;
}
div:active{
    background-color: dimgrey;
}

OUTPUT


COMPLETE OUTPUT IS NOT SHARABLE.
YOU CAN TRY IT ON YOUR CODE EDITOR.


Comments

Popular posts from this blog

Launching Page(Javascript)

AMAZON HOME PAGE CLONE PROJECT

Array in function Javascript