CSS - ANIMATIONS

    // ANIMATIONS
    animation: -name- time style delay fillmode repetition
    animation: color-change 1s linear forwards 1/alternate
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear |ease | ease-in | ease-out | ease-in-out; /*Speed curve of the animation*/
    animation-direction: alternate |reverse |alternate-reverse 
    animation-iteration-count: infinite, 1, 4...; /*How many times an animation should run*/
    animation-delay: .5s;
    animation fillmode: forwards, backwards, both, none; /*a style for the target element when the animation is not playing (before it starts, after it ends, or both).*/

    @keyframes color-change {
        0% {
            background-color: black;
    
        }
    
        100% {
            background-color: lightgreen;
            color: black;
        }
    }

    .div2:hover {
        animation-play-state: paused;
        color: black;
    }


    @keyframes custom {
        from {
            font-size:1rem;
        }
    
        25% {
            font-size:2rem;
            height: 50px;
        }
    
        50% {
            font-size:2.5rem;
            color: limegreen;
        }
    
        75% {
            font-size:1.5rem;
        }
    
        to  {
            font-size:1rem;
        }
    }