w3 schools css animation code example

Example 1: animation in css

/* 
========================
   Animation 
========================
animation-name: We have to create our animation "example" etc.
animation-duration:         4s;
animation-delay:            1s;
animation-iteration-count:  4;
animation-direction:        normal/reverse/alternate/alternate-reverse;
animation-timing-function:  ease/ease-in/ease-out/ease-in-out;
animation-fill-mode:        forwards/backward;
*/

@keyframes example {
    from {
        color: #a8dadcff;
    }
    to {
        color: #e63946ff;
    }
}

.animation {
    animation-name: "example";
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /* animation-direction: reverse; */
}

Example 2: css animation

Read this helpful, short and straightforward article to learn CSS animation perfectly.

https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd

Tags:

Html Example