@keyframes

The @keyframes rule defines the animation code. An animation is created by gradually changing one set of styles into another. During the animation, you can change the set of styles multiple times. You can specify when a style change occurs using percentages or the from and to keywords, which correspond to 0% and 100%. 0% is the start of the animation and 100% is when it ends. Use the animation properties to control the appearance of the animation and to bind the animation to selectors. The !important rule is ignored inside keyframes.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@keyframes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            border-radius: 12px;
            color: #333333!important;
            animation-name: keyframe;
            animation-duration: 5s;
            text-align: center;
            line-height: 4;
            -webkit-text-fill-color: #333333!important;
        }
        @keyframes keyframe {
            from {background: yellow; filter: drop-shadow(0 2px 2px blue);}
            to {background: orange; filter: drop-shadow(2px 0 2px red);}
        }
    </style>
</head>
<body>
<div>
    <p>Welcome to the CSS tutorial.</p>
</div>
</body>
</html>

RESULT