CSS3 Animations

ball, http, www

CSS3 Animations enables better editing options. An animation lets an element gradually change from one style to another. You can change as many CSS properties as you want to, as many times you want to.

Animation Properties

The animation-timing-function specifies the speed curve of an animation in CSS3 animations. It can have the following values:

(1) ease

It specifies an animation with a slow start, then fast, then end slowly (this is default).

(2) linear

It specifies an animation with the same speed from start to end.

(3) ease-in

It specifies an animation with a slow start.

(4) ease-out

It specifies an animation with a slow end.

(5) ease-in-out

It specifies an animation with a slow start and end.

(6) cubic-bezier(n,n,n,n)

It lets you define your own values in a cubic-bezier function.

@key frames

@Key frames hold the styles the element will have at certain times.

Example of key frames with left animation

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

Moving left animation

<html>
   <head>
      <style type = “text/css”>
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>
   <body>
      <h1>Edusite</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = “myFunction()”>Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Moving left animation with keyframes

<html>
   <head>
      <style type = “text/css”>
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
              margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>
   <body>
      <h1>Edusite</h1>
      <p>This is an example of animation left with an extra keyframe
         to make text changes.</p>
      <button onclick = “myFunction()”>Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Spread the love

Leave a Comment

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