Basic how to use Animation using Animate CSS Master

andysupriady(51)

Published in

#utopian-io

Words

682

Reading

4 min

Listen

Play

Hello, how are you ..... !!! In this post I will discuss how to create animations in text, the plugin I use for this tutorial is Animate CSS Master, hopefully this post can be a guide for those who learn to make their web. related to movement on text.

1. What is Animate CSS Master

Animate.css master created by "Dan Eden" is a combination of CSS3 features of CSS3 such as animation (keyframes), transformation, and transition, which is then combined with clas -clas that will allow users to use them, so if you want to add animations simple,
So with the merger of web application makers no longer need to do long pengkodingan, with this function the user simply do a class call from css to create animated movement.

Overall this function has 76 clas, from every class have different movement neda so that user can arrange movement according to its desire. as for the clas clas movement can be seen in the table below.

Table Class

bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp

2. How To Download

Step1.
make sure you already have the file "animate.css-master", if you do not already have the file you can download it at link https://github.com/daneden/animate.css/

Step 2.
In the second stage, we will download the .zip file from animate.css-master by clicking the clone or download button, then select download zip, and wait until the download is complete.

Step 3.
Create a new folder and extract the .zip file to that folder.

3. How to install

Step1.
Create a css file and save it into the folder we created earlier, type the css code as below into the foleder and save it with the name style.css


  .center {
      margin: 0 auto;
    }
    .color {
      font-family: futura;
      font-style: italic;
      width:100%;
      margin: 0 auto;
      text-align: center;
      color:#313131;
      font-size:45px;
      font-weight: bold;
      -webkit-animation:colorchange 20s infinite alternate;
       padding-top: 45px;
 }
    @-webkit-keyframes colorchange {
      0% {
        color: blue;
      }
      10% {
        color: #8e44ad;
      }
      20% {
        color: #1abc9c;
      }
      30% {
        color: #d35400;
      }
      40% {
        color: blue;
      }
      50% {
        color: #34495e;
      }
      60% {
        color: blue;
      }
      70% {
        color: #2980b9;
      }
      80% {
        color: #f1c40f;
      }
      90% {
        color: #2980b9;
      }
      100% {
        color: pink;
      }
    }

Step2.

Create new file and Create basic basic structure of html.


<html>
     <head>
      <title> animate css master  </title>
     </head>
    <body>
     ......  
    </body>
</html>

Step3.
Create function for CSS calling. and put it under < /title>


  <link rel="stylesheet" href="animate.css-master/animate.min.css" >  
 <link rel="stylesheet" href="style.css" >

Step4.
Create a CSS function to set the main size of the image we want to display. and place it in the </head> top


 <style type="text/css">
div{
    -webkit-animation-duration: 5s; 
    -webkit-animation-delay:3s; 
    -webkit-animation-iteration-count: infinite;
}
 </style>

Step5.
Create code for text to be animated.


<div class="color" > 
    <div class="animated bounce"  >animated bounce</div >
    <div class="animated shake"  > animated shake
    <div class="animated zoomInDown"  > animated fade In Up Big</div > 
    <div class="animated fadeInUp"  > animated fade In Up</div > 
    <div class="animated flipInX"  >animated flip In X</div > 
</div >

4. Explanation of the code

<link rel="stylesheet" href="animate.css-master/animate.min.css" > = This code aims to add the css function of animate.css-master.
<link rel="stylesheet" href="style.css" > = This function aims to call css style that will make the appearance or color of the text that can change automatically
-webkit-animation-duration: 5s; = the code aims to set the duration of movement
-webkit-animation-delay:3s; = aims to set the delay of the animation
-webkit-animation-iteration-count: infinite;= To make the animation run continuously
<div class="color" > = This code is used to call css class for text, which is raining for text coloring.
<div class="animated bounce" &gt= This function is used to create the class of movement we want