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

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section