CSS Animation

Published by StudyMuch on

CSS Animation

CSS Animation

In this tutorial you will learn CSS Animation, here you all learn basic and advance about CSS Animation such as; how to animate HTML elements, @keyframe rule of Animation, Animation timing and function, Animation delay, CSS Repeating Animation, CSS Animation Direction, Animation Play State, Animation Fill Mode, etc. all about the CSS Animation.

What is CSS Animation

CSS Animation is a proposed module for cascading style sheet that is use to animate the HTML element’ transition from one style to another.

With Animation we can animate the HTML elements without having to use JavaScript.

Animation has two components;

  • Style describes the CSS animation.
  • A set of keyframe that indicate the start, intermediate waypoints and end states of the animation’s style.

Look a Simple Animation with Programming;

<!DOCTYPE html>
<html>
<head>
   <title>Animation </title>
   <style type="text/css">
       body,html{
           align-items: center;
       }
      @keyframes myAnimation {
         from {
            background-color: red;
            left: 0px;
         }
         to {
            background-color: green;
            left: 450px;
         }
      }
      p{text-align: center;
        color: white;}
      div {
         animation-name: myAnimation;
         animation-duration: 3s;
         position:absolute;
         justify-content: center;
         display: flex;
         margin-left: 50px;
         margin-top: 100px;
         width: 200px;
         border-radius: 5px;
         height: 100px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <div><p>StudyMuch</p>
   </div>
</body>
</html>

Output of above Programming Animation;

You can see the output of above programming of animation, how a box is sliding left to right with background color changing that all done by animation.

@Keyframe Rule

To configure the actual appearance of the animation we need to use the @keyframe at-rule.

The @keyframe at-rule defines keyframe of waypoints along the animation sequence which controls the intermediate stapes in a CSS animation.

Aside from “from / 0% to / 100%”. We can optionally include additional keyframe (e.g., 25% 44% 53% 60%) that describe intermediate steps between the start and end of the element, that is the steps to set the animation in HTML elements.

Each @keyframe rule contains a style list of keyframe selectors. Which specify the percentage along the animation when the keyframe occur, and a block containing the style for that keyframe. 0% include the starting state of the animation sequence, while 100% is the final state of the animation.

CSS Animation

NOTE: 0% and 100%are very important, they have special aliases: from and to.

To create and use the animation, first create a @keyframe with the name that is then used by the animation-name properly to match an animation to its keyframe declaration. We also need to specify the duration of the animation using the animation-duration property.

Now we see the all-programming examples of CSS Animation which we define in header different types of animation.

Look here is an animation examples that different from above Programming;

<!DOCTYPE html>
<html>
<head>
   <title>StudyMuch Animation</title>
   <style type="text/css">
      @keyframen myAnimation {
         0% {
            background-color: gold;
            top: 0px;
            left: 0px;
         }
         20% {
            background-color: green;
            top: 200px;
            left: 230px;
         }
         40% {
            background-color: deeppink;
            top: 0px;
            left: 230px;
         }
         60% {
            background-color: green;
            top: 200px;
            left: 0px;
         }
         80% {
            background-color: deepskyblue;
            top: 0px;
            left: 0px;
         }
      }
      div {
         animation-name: myAnimation;
         animation-duration: 5s;
         position: relative;
         width: 100px;
         margin-left: 300px;
         border-radius: 20px;
         height: 100px;
         background-color: deeppink;
      }
        p{font-style:italic;
        font-weight: bold;
        text-align: center
        color:darkgreen;
        padding: 10px;}
   </style>
</head>
<body>
   <div><p>StudyMuch</p></div>
</body>
</html>

Output of above Programming Example of Animation;

 

Animation Timing Function

Now, we learn the animation timing function, how to set the timing on animation. The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle of animation.

Valid Value to set the animation timing function;

  • linear: To apply this property the animation effect has the same speed from start to end.
  • ease: This is default setting of animation, the animation effect normally starts slowly, then fast and ends slowly.
  • ease-in: Through using this property, the animation effect starts slowly.
  • ease-out: Through using this property, the animation effect ends slowly.
  • ease-in-out: The animation effect both starts and ends slowly.

See the Programming of Animation (Linear Value)

<DOCTYPE html>
    <html>
    <head>
 <title> Animation Timing Function </title>
   <style type="text/css">
          @keyframes myAnimation {
             from {
                background-color: darkorange;
                top: 0px;
                left: 0px;
             }
             to {
                background-color: darkred;
                top: 200px;
                left: 400px             }
          }
          div {
             animation-name: myAnimation;
             animation-duration: 2s;
             animation-timing-function: linear;
             position: relative;
             width: 100px
             height: 100px;
             background-color: darkgreen;
             color: white;
             text-align: center;
             border-radius: 20px;
          }
       </style>
    </head>
    <body>
       <div>StudyMuch</div>
    </body>
    </html>

Output of above Programming;

Animation Delay

Here you will learn how to delay the animation, to delay animation we need to use the animation-delay CSS property. The animation-delay CSS property specifies a duration to wait before the transition effect starts of animation.

Look Programming Example of Delay Animation;

<DOCTYPE html>
    <html>
    <head>
       <title> Animation Delay </title>
       <style type="text/css">
          @keyframes myAnimation {
             from {
                background-color: blue;
                top: 0px;
                left: 0px;
             }
             to {
                background-color: darkgreen;
                top: 150px;
                left: 400px;
             }
          }
          div {
             animation-name: myAnimation;
             animation-duration: 2s;
             animation-delay: 1s;
             animation-timing-function: linear;
             position: relative;
             width: 100px;
             margin-left: 200px;
             margin-top: 20px;
             height: 100px;
             background-color: darkslateblue;
             color: white;
             text-align: center;
             border-radius: 20px;
          }
          h2{text-align: center;}
       </style>
    </head>
    <body>
        <h2><u>Delay Animation</u></h2>
       <div>StudyMuch</div>
    </body>
    </html>

Output of above Programming;

 

Repeating Animation

Here you will learn how to repeat an animation, you can repeat any CSS animation through using the animation-iteration-count CSS property.

It set the number of times an animation cycle should be played. It can take a <number> value of the keyword infinite, that means the animation will be repeated infinity. Look below the programming example for better understanding.

Look the Programming Example of Repeating Animation;

<!DOCTYP html>
<html>
<head>
   <title> Repeating Animation </title>
   <style type="text/css">
      @keyframes myAnimation {
         0% {
            background-color: red;
            top: 0px;
            left: 0px;
         }
         25% {
            background-color: green;
            top: 180px;
            left: 300px;
         }
         50% {
            background-color: blue;
            top: 0px;
            left: 300px;
         }
         75% {
            background-color: green;
            top: 180px;
            left: 0px;
         }
         100% {
            background-color: darkcyan;
            top: 0px;
            left: 0px;
         }
      }
      div {
         animation-name: myAnimation;
         animation-duration: 3s;
         animation-iteration-count: infinite;
         position: relative;
         margin-top: 20px;
         margin-left: 250px;
         width: 80px;
         height: 80px;
         border-radius: 50px;
         background-color: gold;
      }
      h2{text-align: center;
      color: darkgreen;}
      p{font-size: 10px;
       text-align: center;
       padding-top: 30px;
    font-weight: bold;
color: white;}
   </style>
</head>
<body>
  <h2>Repeating Animation</h2>
   <div>
       <p>StudyMuch</p>
   </div>
</body>
</html>

Output of above Programming;

Animation Direction

The animation-direction CSS property sets the animation direction, whether an animation should play forwards, backwards, or alternation back and front.

Valid Value to set Animation Direction;

  • normal: It is default setting; the animation plays forwards each cycle.
  • alternate: The animation reverse direction each cycle, with the first iteration being played forward.
  • alternate-reverse: Through this value, the animation reverse direction each cycle, with the first iteration being played backwards.
  • reverse: Through using this value the animation played backwards each cycle.

below, we given you programming example of only one direction that is (Reverse Direction), and left two direction you apply yourself.

Look below the Programming Example of Animation Direction (Reverse);

<DOCTYPE html>
  <html>
  <head>
     <title> Animation Direction </title>
     <style type="text/css">
        @keyframemyAnimation {
           from {
              background:linear-gradient(
              to top, #d00000, #015905);
              left: 0px;
           }
           to {
              background:linear-gradient(
              to left, blue,red);
              left: 380px;
           }
        }
        div {
           animation-name: myAnimation;
           animation-duration: 2s;
           animation-iteration-count: infinite;
           animation-direction: reverse;
           position: relative;
           border-radius: 50px;
           width: 100px;
           height: 100px;
        }
        h2{text-align: center;}
        p{
          text-align: center;
          padding-top: 40px;
          font-weight: bold;
          color: white;
        }
     </style>
  </head>
  <body>
    <h2>Animation Direction</h2>
     <div><p>StudyMuch</p></div>
  </body>
  </html>

Output of above Programming;

 

Animation Fill Mode

Now we see the animation fill mode, the animation-fill-mode CSS property sets how an animation applies styles to its target before end after tis starts.

Valid Value to set Animation Fill Mode;

  • forward: By using this value, the element will keep back the style set by the last keyframe.
  • backward: the element will keep back the style set by the last keyframe.
  • both; The element will retain the style and set by the first and last keyframe.
  • none: It is default setting; the animation will not apply style to the element while it’s not executing.

Below, we given you only one programming with one valid value, and that is “forwards” valid value.

Look Programming of Animation Fill Mode (Forwards Mode);

<!DOCTYPE
html>


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
initial-scale=1.0">
    <title>Animation Fill Mode</title>
    <style type="text/css">
        @keyframes myAnimation{
            from{color:darkblue;
                font-size: 10px;}
            to{color: red;
               font-size: 40px;}
        }
      p{animation-name: myAnimation;
      animation-duration: 2s;
      animation-fill-mode:forwards;
      text-align: center;
    animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
  <center><h2><u>Animation Fill Mode
  </u></h2></center>
  <p>Learn Amazing with <b>StudyMuch</b>
  </p>
</body>
</html>

Output of above Programming;

CSS Animation – Shorthand

The animation CSS property is a shorthand for the following value.

  • animation-name
  • animation-duration
  • animation-paly-state
  • animation-full-mode
  • animation-iteration-count
  • animation-delay
  • animation-timing-function

It is recommended to always use the animation property rather than set its individual sub-properties.

Look below the programming example code.

Programming Example;

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Animation - Shorthand</title>
    <style type="text/css">
        @keyframes myAnimation{
      from{
        background: linear-gradient(
        to top, darkgreen, blue);
        left: 0px;}
       to{
        background: linear-gradient(
        to left, darkblue, red);
        left: 300px;}
        }
        div{
            animation: myAnimation 2s
            linear 1s infinite alternate;
            width: 100px
            height: 100px;
            border-radius: 50px;
            position: relative;
            background: linear-gradient(
            to bottom, rgb(0, 200, 255), 
            rgb(178, 0, 218));
        }
        p{font-weight: bold;
        text-align: center;
        padding-top: 40px;
        color: white;}
    </style>
</head>
<body>
    <h2><u>Animation - Shorthand</u></h2>
    <div><p>StudyMuch</p></div>
</body>
</html>

Output of above Programming;

CSS Animation Play State

Here, you see one more style of animation that is animation play state, the animation-play-state CSS property defines whether an animation is running or paused.

Valid Value to use Play State Animation;

  • running: it is default value; the animation is playing/running.
  • paused: Through using this value, the animation is paused.

Look the Programming of Play State Animation;

<!DOCTYPE html>
<html>
<head>
   <title> Animation Play State </title>
   <style type="text/css">
      @keyframes running {
         from {
            top: 0px;}
         to {
            top: 230px;}
      }
      .running {
         animation-name: running;
         animation-duration: 5s;
         animation-play-state: running;
         background:red;
      }
      .paused {
         animation-name: paused;
         animation-duration: 5s;
         animation-play-state: paused;
      }
      div {
         width: 150px;
         height: 50px;
         border-radius: 50px;
         position: relative;
         text-align: center;
         background:blue;
         color: white;
      }
   </style>
</head>
<body>
  <h2><u>Animation Play State</u></h2>
   <div class="running"> Animation is
   currently playing. </div>
   <div class="paused"> Animation is
    currently paused. </div>
</body>
</html>

Output of above Programming;

 

You can see the output of above all programming examples, how to work the animation you saw different types of animation, you can design it better then this to applies more and different properties.

So, in this tutorial you learned all about the CSS Animation, different – different style and how to using the properties all about animation.

I hope you all read this tutorial and learn something new from this tutorial.

If you want to copy our programming code, then you can copy our code for revision, learning and applying your project purpose only.

Read Also-

 

Categories: Uncategorized
Tags:

4 Comments

graliontorile · August 6, 2022 at 12:07 pm

I have learn a few just right stuff here. Definitely price bookmarking for revisiting. I surprise how a lot attempt you set to make this type of excellent informative website.

Reply

zoritoler imol · September 9, 2022 at 1:06 pm

Hiya very cool website!! Guy .. Excellent .. Wonderful .. I’ll bookmark your blog and take the feeds alsoKI’m glad to seek out so many useful info right here within the submit, we’d like work out extra techniques on this regard, thank you for sharing. . . . . .

Reply

Створити особистий акаунт · May 9, 2024 at 2:43 pm

I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

Reply

smortergiremal · November 4, 2024 at 9:33 pm

I conceive other website proprietors should take this site as an model, very clean and excellent user genial style and design.

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Applications of AI (Artificial Intelligence)

Applications of AI (Artificial Intelligence) In today’s world, technology is growing very fast, and we are getting in touch with different new technologies day by day. Artificial Intelligence (AI) has emerged as a game-changer, revolutionizing Read more…

Interview Questions and Answers for Freshers

Interview Questions and Answers for Freshers

Top 45 IT Interview Questions and Answers for Freshers Going through a job interview, especially as a Freshers IT graduate, can be challenging. However, with right preparation and a clear understanding of common interview questions Read more…

Python Sets

Python Sets

Understanding Python Sets Python, a versatile and powerful programming language, offers a wide range of data structures that make it a favourite among developers. Set is a fundamental data structure used for storing collections of Read more…