Animations in CSS

What are Animations?

  • CSS animations are used to apply animations on HTML elements.

  • @keyframes is used to apply CSS animations.


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Animation Property in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


CSS Animation Properties

i) animation-name: It is used to specify the name of the animation.

div {
     animation-name: movingBox;
 }


ii) animation-duration: It is used to specify that, how long time an animation should take to complete one cycle.

div {
     animation-duration: 3s;
 }


iii) animation-delay: The animation-delay property specifies a delay for the start of an animation.

div {
     animation-delay: 4s;
 }


iv) animation-iteration-count: It is used to specify, how many times the animation will be played.

div {
     animation-iteration-count: 5;
 }


v) animation-direction: property specifies in which direction that animation should be played forwards, backward, or in alternate cycles.

div {
     animation-direction: alternate;
 }


vi) animation: It is the shorthand property to specify all the animation properties.

animation: name duration timing-function delay iteration-count fill-mode;


vii) animation-fill-mode: This property specifies, how a CSS animation applies styles to its target before and after its execution.

div {
     animation-fill-mode: forwards;
 }


viii) animation-play-state: This animation property is used to sets whether an animation is running or paused.

div {
     animation-play-state: running;
 }


CSS @keyframes

@keyframes animation-name {
            from {CSS properties}
            to {CSS properties}
           }

from { }: The place where from the animation will start.

to { }: The place where the animation will end.

animation-name: It takes the name of the animation.

"We can also use % values as keyframes selector"

@keyframes animation-name {
           0% {CSS properties}
           25% {CSS properties}
           75% {CSS properties}
           100% {CSS properties}
}


Using CSS Animation Properties

index.html

<!DOCTYPE html>
<html>
    <title> CSS Animation </title>
<head>
    <style>
        body {
            padding: 5rem;
        }

        div {
            width: 100px;
            height: 100px;
            background: purple;
            position: relative;
            border-radius: 1rem;
            animation: movingBox 5s ease-in-out 2s 5 forwards;
        }

        @keyframes movingBox {
            0% {
                top: 0px;
                left: 200px;
            }

            25% {
                top: 200px;
                left: 200px;
            }

            75% {
                top: 200px;
                left: 0px;
            }

            100% {
                top: 0px;
                left: 0px
            }
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

Output:

Write this code in your Code Editor and See the output on the browser window.


CSS Animation Property PDF

Download Now

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad