zeek37.html

 

<!DOCTYPE html>

<html lang="en">

 

<!-- Instead of having property changes take effect immediately, you can cause the 

changes in a property to take place over a period of time -->

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Transition Effects</title>

    <style>

        .box {

            border: blue solid 2px;

            display: flex;

            width: 34%;

            height: 34vh;

            margin: auto;

            margin-top: 150px;

            justify-content: center;

            align-items: center;

            color: rgb(236, 22, 22);

            font-size: 34px;

            font-weight: bold;

            background-color: cyan;

            transition-property: background-color;

transition-duration: 5s;

            transition-delay: 1s;

            transition-timing-function: ease-in-out;

        }

        .box:hover {

            background-color: rgb(221, 243, 20);

            color: rgb(20, 55, 255);

            font-size: 54px;

            width: 54%;

            height: 54vh;

            border-radius: 34px;

        }

    </style>

</head>

<body>

    <h1 style="margin-left: 273px;">WELCOME TO WEBPAGE WITH CSS TRANSITION EFFECTS</h1>

    <div class="box">

        This box has transition property.

    </div>

</body>

</html>