CSS Transition Animation

CSS Transition animation is more simple and easy to use in any where on page more effectable.

CSS animation is a method of animating certain HTML elements without having to use JavaScript.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property. You can also add CSS Tratsition on page scroll down.

Name: animation-name

Declares the name of the @keyframes at-rule to manipulate.
animation-name: none;
animation-name: fadeIn;
animation-name: moveRight;

Duration : animation-duration:

Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-duration: 0s;
animation-duration: 1.2s;
animation-duration: 2400ms;

Timing : animation-timing-function:

Defines how the values between the start and the end of the animation are calculated.
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(4, end);

Timing Delay: animation-delay:

Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-delay: 0s;
animation-delay: 2400mss;
animation-delay: -500ms;

Direction : animation-direction:

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

Iteration : animation-iteration-count:

the number of times the animation should be performed. you can also specify infinite to repeat the animation indefinitely.
animation-iteration-count: 1;
animation-iteration-count: infinite;

Fill Mode : animation-fill-mode:

Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

Play State : animation-play-state

Specifies whether the animation is running or paused
animation-play-state: running;
animation-play-state: paused;

CSS Transition Example

.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation.

Example:

 div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}

The main concept of this demo is once the page is loaded, the page should “appear” three DIVs one after another by using animations. For this creation we are creating 3 boxes. Those three boxes are created by specified height,weight,background.For the creation of three boxes we defined 3 classes like .one, .two, .three. for that each class we created some properties like animation,animation-delay,animation-iteration-count,animation-fill-mode.

The animation-delay property specifies a delay for the start of an animation.
for class .one we defined animation-delay as 2s.
for class .two we defined animation-delay as 3s.
for class .three we defined animation-delay as 4s.
The animation-iteration-count property sets the number of times the animation plays, either as an integer or infinite.in this we specified only one time if we want n no.of time it is possible.
The animation-fill-mode property preserves an animation’s start state before a delayed animation executes (backwards),its end state after its final iteration (forwards), or both.animation-fill-mode is forwards.

.one {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 1s;
  animation-delay: 2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.two {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.three {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 4s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
div{
opacity:0;
margin-bottom:20px;
}

By using all this 3 classes we created 3 boxes with width: 100px; height: 100px; background: red; and
for animation we used
animation: mymove 1s;
animation-delay: 2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
By using all this poperties the animation will start one after one .

<p>  the animation will start one after one </p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p><strong>Note:</strong> The animation-delay property is not supported in Internet Explorer 9 and earlier versions.</p>

The animation-delay property is not supported in Internet Explorer 9 and earlier versions.
To support animation in safari we used @-webkit-keyframes mymove,@keyframes mymove , @-webkit-keyframes mymove2 ,@keyframes mymove2, -webkit-animation: mymove2 1s, -webkit-animation-delay: 2s .

How to show div on hover jquery mouseover

Show div on hover using  JQuery, hiding and showing a div in HTML is really simple. In this demo will show div on hover  when mouse hover on a particular  button or span.
The main concept is here we will add  ‘show div’ outside of inner div, one is inside and rest of the div is outside. The outer div will always be displayed. The inner div will be hidden by default and once the mouse is hovered on the outer div , the inner div will be shown.

We will use the CSS for hover. If we want to hide the div once the user has moved their mouse over it.

First we need to add the HTML. We create a div, show div on hover .mega-menu inside it we add another div  #menu-dropdown , which is hidden at first. Once the user moves their mouse over the .mega-menu div, the inside div is hidden.

<span class="menu-item mega-menu">Home</span>

<div id="menu-dropdown">
  <p class="paragraph">Phoenix</p>
</div>

Next we have to add some CSS. we creating one class and one ID.
The Id is #menu-dropdown. In that Id we defined some properties like display:none; position:absolute; width:50%; height:50%; and the class is .mega-menu and when mouseenter the child it show  background:grey color.

body{
  margin:0px;
}
.mega-menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  background: grey;
  color:white;padding:10px;
  width:150px;margin:auto;
}

finally we using jquery for action performance.
jQuery .hover() specifies two functions: one for the mouseEnter event and one for the mouseLeave event.

jQuery mouseenter( )

The mouseenter( ) method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter( ):
mouseenter()

jQuery mouseleave( )

The mouseleave( ) method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave( ):
mouseleave()

jQuery mouseover( )

The mouseover( ) event occurs when the mouse pointer is over the selected element.
The syntax for using mouseover( ):
mouseover()

 $(document).ready(function(){
      $(".mega-menu").mouseenter(function() {
          $('#menu-dropdown').stop().show();
      });
      
      $(".mega-menu, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').hide();
        };
      });
});

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
That’s all you need to make this work. Now, it’s up to you; style it and make it look nice with some CSS coding.

Demo

Jquery-MouseOver-Event

When we hover over a button on the menu the cursor changes to a pointer, and mouse pointer moves over the selected elements.
when we move the mouse out from the button then mouse should leave the selected element.

The main concept is we will add two divs, one inside the other. The outer div will always be displayed. The inner div will be hidden by default and once the mouse is hovered on the outer div, the inner div will be shown.and when mouse leaves the outer div then inner div should be hidden.

First we need to add the HTML. We create a div, .mega-menu inside it we add another div #menu-dropdown , which is hidden at first. Once the user moves their mouse over the .mega-menu div, the inside div is hidden.

<div id="menu">
  <ul class="menu-wrapper" style="padding:0px;margin:0px;">
    <li class="menu-item mega-menu">Home</li>
    <li class="menu-item">About</li>
    <li class="menu-item">Contact</li>
  </ul>
</div>
<div id="menu-dropdown">
  <div class="dropdown-content">
    <p class="paragraph">Phoenix</p>
  </div>
</div>

To implement this method we are using css and Jquery.
we creating one class and one ID. The Id is #menu-dropdown. In that Id we defined some properties like  display:none;  position:absolute;  width: 50%;  height:50%; and the class is .menu-item and properties are like display:inline-block;  background:#ddd;  padding:10px; and in HTML we used List order to show them in a menu header. the menu buttons have background:#ddd; and when mouseenter the child have background:grey.

body{
  margin:0px;
}
#menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  position:absolute;
  background: grey;
  color:white;
  width: 50%;
  height:50%;
}
.menu-item{
  display:inline-block;
  background:#ddd;
  padding:10px;
}

jQuery .hover( ) specifies two functions: one for the mouseEnter event and one for the mouseLeave event.

JQuery Mouseenter( )

The mouseenter( ) method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter( ):
mouseenter()

JQuery Mouseleave( )

The mouseleave( ) method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave( ):
mouseleave()

JQuery Mouseover( )

The mouseover event occurs when the mouse pointer is over the selected element.
The syntax for using mouseover( ):
mouseover()

The .hover( ) method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

 $(document).ready(function(){
      $(".mega-menu").mouseenter(function() {
          $('#menu-dropdown').stop().show();
      });
      
      $(".mega-menu, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').hide();
        };
      });
});

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11.

How to create a Background image Clip-Path

The clip-path property can reference an SVG graphics element or use a specified basic shapes as clipping path.

clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords, which are part of the CSS exclusion module.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

In this demo we are creating some shapes like triangle,trapezoid,parallelogram,rhombus.

Triangle

To create a Traingle we are using a property like clip-path: polygon(50% 0%, 0% 100%, 100% 100%).

.triangle{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
</div>

Trapezoid

Clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); is used to create trapezoid.

.trapezoid{
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
</div>

parallelogram

To create a parallelogram we are using a property called clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%).

.parallelogram{
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
</div>

Rhombus

And finally clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
is used to create rhombus.

.rhombus{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
</div>

we are using another property is display :inline-block.
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Amonge all this Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path.
You can also clip images into different shapes with this property and arrange them together in best ways with the help of a CSS.

Select-Dropdown

The main concept of this demo is no placeholder attribute in ‘select’ tag but it can make the placeholder for a ‘select’ box.
I am using placeholders for text inputs . But I’d like to use a placeholder for my selectboxes.

I am creating a class like option[value=””][disabled] in that i used a property called display:none; if the property is disabled, its value will be either true or false.i like to write selected disabled in the first option so that the first value will disable when we click real options.

I am creating some properties like color:#516a8a; for the placehloder and color: #444; for the real options.and when we click the real options its color is #fff. using a transparent as background , outline:none; height:35px ;and border: 1px solid #516a8a; for the select option.

option[value=""][disabled] {
display:none;
}
 select:invalid {
 color:#516a8a;
 }
 select option {
 color: #444;
  }
 select{
  border: 1px solid #516a8a;
  background: transparent;
  outline:none;
  height:35px;
 }
select:valid {
color:#fff;
}
<div style="background: rgba(3, 41, 90, 0.8);display: inline-block;padding: 100px;">
  <div style="background:#03295a;display: inline-block;padding: 50px;">
  <select required>
   <option value="" selected disabled>Select your option</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Sapota">Sapota</option>
    <option value="Banana">Banana</option>
  </select>
  </div>
</div>

When the select element is required it allows use of the :invalid CSS class which allows you to style the select element when in it’s “placeholder” state. :invalid works here because of the empty value in the placeholder option.
so,that selected value always being disable when we selecting a real option

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11

Page-Loaders

Now a days, if a website takes more than 4 seconds to load,
a visitor might think your site is being unresponsive and
simply close the page and find something else. so, creative page-loaders were created by designers to overcome this problem.

A page loader is any kind of animation that visually communicates to a visitor and also used to keep visitors entertained while the page is still loading.

“spinners” can be used to show the loading state in your projects.you can create loaders with the help of HTML and CSS and there is no need of JavaScript.

You can set different sizes different types and different speed of loaders.And use CSS or inline styles to change the dimensions as needed.

Use spinners within buttons to indicate an action is currently processing or taking place.

The size of the loader is specified with the width and height properties.we add an animation that makes the border-color, spin forever with a 2 second animation speed.

Create a DIV with your page loader in it. Add this DIV to every page on your website that links to the page you need a loader for. Then make sure to add display: none; to your CSS for this DIV, this will make it not show up at all on these pages under normal circumstances.

Making use of a regular UI library, You can assign
diameter of an inner circle;
the speed of animation;
range and density;
color and background color.
you can also choose several standard shapes including oval, square, rectangle, spiral, and rounded rectangle.

Dual-Ring-Loader

.lds-dual-ring {
          display: inline-block;
          width: 64px;
          height: 64px;
      }

          .lds-dual-ring:after {
              content: " ";
              display: block;
              width: 46px;
              height: 46px;
              margin: 1px;
              border-radius: 50%;
              border: 5px solid #0009f8;
              border-color: #0009f8 transparent #ff3366 transparent;
              animation: lds-dual-ring 1.2s linear infinite;
          }

      @keyframes lds-dual-ring {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }
<div class="lds-dual-ring"></div>

Roller -Loader

.lds-roller {
           display: inline-block;
           position: relative;
           width: 64px;
           height: 64px;
       }

           .lds-roller div {
               animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
               transform-origin: 32px 32px;
           }

               .lds-roller div:after {
                   content: " ";
                   display: block;
                   position: absolute;
                   width: 6px;
                   height: 6px;
                   border-radius: 50%;
                   background: #ff3366;
                   margin: -3px 0 0 -3px;
               }

               .lds-roller div:nth-child(1) {
                   animation-delay: -0.036s;
               }

                   .lds-roller div:nth-child(1):after {
                       top: 50px;
                       left: 50px;
                   }

               .lds-roller div:nth-child(2) {
                   animation-delay: -0.072s;
               }

                   .lds-roller div:nth-child(2):after {
                       top: 54px;
                       left: 45px;
                   }

               .lds-roller div:nth-child(3) {
                   animation-delay: -0.108s;
               }

                   .lds-roller div:nth-child(3):after {
                       top: 57px;
                       left: 39px;
                   }

               .lds-roller div:nth-child(4) {
                   animation-delay: -0.144s;
               }

                   .lds-roller div:nth-child(4):after {
                       top: 58px;
                       left: 32px;
                   }

               .lds-roller div:nth-child(5) {
                   animation-delay: -0.18s;
               }

                   .lds-roller div:nth-child(5):after {
                       top: 57px;
                       left: 25px;
                   }

               .lds-roller div:nth-child(6) {
                   animation-delay: -0.216s;
               }

                   .lds-roller div:nth-child(6):after {
                       top: 54px;
                       left: 19px;
                   }

               .lds-roller div:nth-child(7) {
                   animation-delay: -0.252s;
               }

                   .lds-roller div:nth-child(7):after {
                       top: 50px;
                       left: 14px;
                   }

               .lds-roller div:nth-child(8) {
                   animation-delay: -0.288s;
               }

                   .lds-roller div:nth-child(8):after {
                       top: 45px;
                       left: 10px;
                   }

       @keyframes lds-roller {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

Spinner

.lds-spinner {
          color: official;
          display: inline-block;
          position: relative;
          width: 64px;
          height: 64px;
      }

          .lds-spinner div {
              transform-origin: 32px 32px;
              animation: lds-spinner 1.2s linear infinite;
          }

              .lds-spinner div:after {
                  content: " ";
                  display: block;
                  position: absolute;
                  top: 3px;
                  left: 29px;
                  width: 5px;
                  height: 14px;
                  border-radius: 20%;
                  background: #ff3366;
              }

              .lds-spinner div:nth-child(1) {
                  transform: rotate(0deg);
                  animation-delay: -1.1s;
              }

              .lds-spinner div:nth-child(2) {
                  transform: rotate(30deg);
                  animation-delay: -1s;
              }

              .lds-spinner div:nth-child(3) {
                  transform: rotate(60deg);
                  animation-delay: -0.9s;
              }

              .lds-spinner div:nth-child(4) {
                  transform: rotate(90deg);
                  animation-delay: -0.8s;
              }

              .lds-spinner div:nth-child(5) {
                  transform: rotate(120deg);
                  animation-delay: -0.7s;
              }

              .lds-spinner div:nth-child(6) {
                  transform: rotate(150deg);
                  animation-delay: -0.6s;
              }

              .lds-spinner div:nth-child(7) {
                  transform: rotate(180deg);
                  animation-delay: -0.5s;
              }

              .lds-spinner div:nth-child(8) {
                  transform: rotate(210deg);
                  animation-delay: -0.4s;
              }

              .lds-spinner div:nth-child(9) {
                  transform: rotate(240deg);
                  animation-delay: -0.3s;
              }

              .lds-spinner div:nth-child(10) {
                  transform: rotate(270deg);
                  animation-delay: -0.2s;
              }

              .lds-spinner div:nth-child(11) {
                  transform: rotate(300deg);
                  animation-delay: -0.1s;
              }

              .lds-spinner div:nth-child(12) {
                  transform: rotate(330deg);
                  animation-delay: 0s;
              }

      @keyframes lds-spinner {
          0% {
              opacity: 1;
          }

          100% {
              opacity: 0;
          }
      }
<div class="lds-spinner">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       </div>

circular-Loader

.loader {
           border: 3px solid #0009f8;
           border-radius: 50%;
           border-top: 3px solid #ff3366;
           width: 40px;
           height: 40px;
           -webkit-animation: spin 2s linear infinite; /* Safari */
           animation: spin 2s linear infinite;
       }

       /* Safari */
       @-webkit-keyframes spin {
           0% {
               -webkit-transform: rotate(0deg);
           }

           100% {
               -webkit-transform: rotate(360deg);
           }
       }

       @keyframes spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="loader" style="margin:auto;"></div>

Cube-Grid

.sk-cube-grid {
      width: 40px;
      height: 40px;
      margin: 100px auto;
    }

          .sk-cube-grid .sk-cube {
              width: 33%;
              height: 33%;
              background-color: #ff3366;
              float: left;
              -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
              animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          }

          .sk-cube-grid .sk-cube1 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube2 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube3 {
              -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
          }

          .sk-cube-grid .sk-cube4 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube5 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube6 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube7 {
              -webkit-animation-delay: 0s;
              animation-delay: 0s;
          }

          .sk-cube-grid .sk-cube8 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube9 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

    @-webkit-keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    @keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
<div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div> 
  
    </div>

Line-Loader

.line_loader {
           height: 4px;
           width: 600px;
           position: relative;
           overflow: hidden;
           background-color: #dddeff;
           margin: auto;
       }
      
           .line_loader:before {
               display: block;
               position: absolute;
               content: "";
               width: 200px;
               height: 4px;
               background-color: #0009f8;
               animation: loading 2s linear infinite;
           }

       @keyframes loading {
           from {
               left: -200px;
               width: 30%;
           }

           50% {
               width: 30%;
           }

           to {
               left: 100%;
           }
       }
<div class="line_loader" style="margin-top:100px;"></div>

You should also include a -webkit- prefix for browsers that do not support animation and transform properties.

CSS spinner uses CSS Animation, which is wildly supported by all modern browsers such as Google Chrome and Mozilla Firefox. However, Microsoft Internet Explorer version earlier than 10 don’t support CSS Animation.

To support older IE, you have to use GIF format image.

Demo

CSS-Animations-when-scroll-down

Animations

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width.

In this demo i am going to show different types of animations when we scroll the page . First, we are using a image having width 350px and height 218px. When you scroll the page from top to bottom it will move with nice animation effect.

   <div id="page">
        <section class="page-section">
            <div class="container">
                <div class="content">
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">Bounce Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounce" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Pulse Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="pulse" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Shake Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="shake" />
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Tada Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="tada" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Swing Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="swing" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Wobble Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wobble" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Wiggle Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wiggle" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceIn" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceInUp Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInUp" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">BounceInDown Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInDown" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceInLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInLeft" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">BounceInRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInRight" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                <h2 class="title">FadeIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeIn" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                 <h2 class="title">FadeInUp Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUp" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInDown Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDown" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">FadeInLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeft" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
             <h2 class="title">FadeInRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRight" />
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInUpBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUpBig" />
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                <h2 class="title">FadeInDownBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDownBig" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">FadeInLeftBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeftBig" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInRightBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRightBig" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateIn" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">RotateInUpLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpLeft" />
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateInDownLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownLeft" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateInUpRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpRight" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">RotateInDownRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownRight" />
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                </div>
            </div>
        </section>
  </div>

Bounce Animation

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.

To animate an element, simply use data-animation="bounce" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounce" />

Pulse Animation

It Provides a single vibration or short burs to an element when we scroll the page.

To animate an element, simply use data-animation="pulse" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="pulse" />

Shake Animation

It provides to move (an object) up and down or from side to side for an element.

To animate an element, simply use data-animation="shake" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="shake" />

Tada Animation

It provides to move an element from side to side.

To animate an element, simply use data-animation="tada" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="tada" />

Swing Animation

The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.

To animate an element, simply use data-animation="swing" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="swing" />

Wobble Animation

It provides to move (an object) up and down or from side to side for an element.

To animate an element, simply use data-animation="wobble" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wobble" />

Wiggle Animation

It provides to move or cause to move up and down or from side to side with small rapid movements.

To animate an element, simply use data-animation="wiggle" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wiggle" />

BounceIn Animation

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.

To animate an element, simply use data-animation="bounceIn" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceIn" />

BounceInUp Animation

Bounce Animation effect is used to move the element from bottom to top of the surface.

To animate an element, simply use data-animation="bounceInUp" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInUp" />

BounceInDown Animation

Bounce Animation effect is used to move the element from top to bottom of the surface.

To animate an element, simply use data-animation="bounceInDown" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInDown" />

BounceInLeft Animation

Bounce Animation effect is used to move the element from left side of the surface.

To animate an element, simply use data-animation="bounceInLeft" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInLeft" />

BounceInRight Animation

Bounce Animation effect is used to move the element from right side of the surface.

To animate an element, simply use data-animation="bounceInRight" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInRight" />

FadeIn Animation

The image come or cause to come gradually into (or) out of view, (or) to merge into another shot.

To animate an element, simply use data-animation="fadeIn" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeIn" />

FadeInUp Animation

The image come gradually from bottom to top.

To animate an element, simply use data-animation="fadeInUp" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUp" />

FadeInDown Animation

The image come gradually from top to bottom.

To animate an element, simply use data-animation="fadeInDown" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDown" />

FadeInLeft Animation

The image come gradually from left.

To animate an element, simply use data-animation="fadeInLeft" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeft" />

FadeInRight Animation

The image come gradually from right.

To animate an element, simply use data-animation="fadeInRight" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRight" />

FadeInUpBig Animation

The image gradually move from bottom to top in the page.

To animate an element, simply use data-animation="fadeInUpBig" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUpBig" />

FadeInDownBig Animation

The image gradually move from top to bottom in the page.

To animate an element, simply use data-animation="fadeInDownBig" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDownBig" />

FadeInLeftBig Animation

The image gradually move from left.

To animate an element, simply use data-animation="fadeInLeftBig" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeftBig" />

FadeInRightBig Animation

The image gradually move from right.

To animate an element, simply use data-animation="fadeInRightBig" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRightBig" />

RotateIn Animation

It provides to move or cause to move in a circle round an axis or center.

To animate an element, simply use data-animation="rotateIn" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateIn" />

RotateInUpLeft Animation

The image will rotate from top to left in a circle round motion. (or) in anti clock direction.

To animate an element, simply use data-animation="rotateInUpLeft" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpLeft" />

RotateInDownLeft Animation

The image will rotate from bottom to left in a circle round motion.

To animate an element, simply use data-animation="rotateInDownLeft" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownLeft" />

RotateInUpRight Animation

The image will rotate from top to right in a circle round motion. or in clock direction.

To animate an element, simply use data-animation="rotateInUpRight" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpRight" />

RotateInDownRight Animation

The image will rotate from bottom to right in a circle round motion.

To animate an element, simply use data-animation="rotateInDownRight" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownRight" />

Animate Once:

Adding this will make sure the item only animates once and will not reset when it leaves the view-port.

We are using java script

var appMaster = {
                   dataAnimations: function() {
                   $('[data-animation]').each(function() {
	var element = $(this);
	element.addClass('animated');
	element.appear(function() {
                   var delay = ( element.data('delay') ? element.data('delay') : 1 );
	if( delay > 1 ) element.css('animation-delay', delay + 'ms');				element.addClass( element.data('animation') );
	setTimeout(function() {
	element.addClass('visible');
	}, delay);	
                   });
	});
                    },
                    }; 
  $(document).ready(function() {
	appMaster.dataAnimations();
	});	

The animation property is not supported in Internet Explorer 9 and earlier versions.

Pretty Photo / Gallery photos

Pretty Photo

This demo is going to describe about the pretty photo / gallery photos.
Pretty Photo is a powerful jQuery Light box Plugin. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax contents. It’s a full blown media light box. It is very easy to setup, and very flexible if you want to customize it a bit. ”

“First include the jQuery library, java script link and the CSS link which refer to Pretty Photo in the head of the page(s) where you want to use pretty Photo.”

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/prettyphoto/3.1.6/js/jquery.prettyPhoto.js'></script>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/prettyphoto/3.1.6/css/prettyPhoto.css'>

In the body section we are using a id called main. and we defined a class called .gallery. and we defined the code in between the Unordered HTML List.
An unordered list starts with the tag. Each list item starts with the tag.

“Then, initialize pretty Photo. Put the following code before the closing tag of your body ()

<div id="main">
<ul class="gallery clearfix">
<li><a href="#" rel="prettyPhoto[gallery2]" title="some caption here">
<img src="#" width="160" height="160" alt="some caption here" /></a>
</li>
<li><a href="#" rel="prettyPhoto[gallery2]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>					
</ul>			
</div>

Just add rel=”pretty Photo” to the link you want pretty Photo to be enabled on.

$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({			theme:'minimal'
});		
});

“ The script is compatible and support in every major browser, even IE6 also.”

Hamburger Menu using Jquery and CSS

Hamburger-Menu

We all are well known of the importance of menu icons on the website. They provide great navigation and user experience of the website to both, users as well as website owners.

In this demo, we will explain how to develop a hamburger-type menu that consists of a fixed button on the navigation bar that, when clicked, displays or hides the side menu containing a list of links.

Hamburger menu button is the button on your website which shows or hides the menu icons on the navigation bar.This menu is also responsive, so that on screens with width 100% it occupies the entire page, as follows.

HTML

<header> 
<div class="navbar-header"> 
<div class="toggle-button" id="toggle"> 
<span class="menubar top"></span> 
<span class="menubar middle"></span> 
<span class="menubar bottom"></span> 
</div> </div> 
<nav class="overlay" id="overlay"> 
<ul> <li><a href="#">Home</a></li> 
<li><a href="#">Blog</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Portfolio</a></li> 
<li><a href="#">Contact</a></li> 
</ul> </nav> 
</header> 
<div class="container"> 
<h1>jQuery Overlay Menu Demo Page</h1> 
</div>

In the header section of our page we refer to our style sheet link.

  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

In the body section of the document, the main part is inside the and tags, which contain the hamburger button and the menu links list. And we have defined some classes like
.menubar, .toggle-button, .overlay, .nav-active.
respectively, as we can see below

body { font-family:'Roboto Condensed'}
    .container {
	  max-width: 728px;
	  margin: 100px auto;
	  padding: 100px auto;
	}	
	@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);
	.toggle-button {
		position: fixed;
		top: 8px;
		left: 15px;
		padding: 9px 10px;
		margin: 8px 15px 8px 0;
		height: 20px;
		width: 35px;
		cursor: pointer;
		z-index: 3;
	}
	.menubar {
		background-color: #ff5252;
		display: block;
		width: 100%;
		height: 5px;
		border: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
	}
	.menubar + .menubar {
		margin-top: 4px;
	}
	.middle {
		top: 11px;
	}
	.bottom {
		top: 22px;
	}
	.toggle-button:hover {
		opacity: .7;
	}
	.toggle-active .menubar {
		background-color: #fff;
	}
	.toggle-active .top {
		-webkit-transform: translateY(6px) translateX(0) rotate(45deg);
	}
	.toggle-active .middle {
	   opacity: 0;
	}
	.toggle-active .bottom {
		-webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
	}
	.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.nav-active {
		opacity: 1;
		visibility: visible;
		height: 100%;
	}
	.overlay ul {
		display: block;
		position: relative;
		top: 60px;
		left: 0;
		font-family: 'Vollkorn', serif;
		font-size: 50px;
		font-weight: 400;
		text-align: center;
		list-style: none;
		padding: 0;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

The button that contains the burger icon, that is used to display or hide the menu is defined in the class .navbar-header.

The class .overlay have the list of navigation links that will be displayed or hidden when the button is clicked.

We define the position of the block as fixed which allows us to fix it at a certain point that is defined in the class .overlay. and also we define that when the properties of the element are changed, they will be animated for .35 seconds, causing the menu to smoothly appear.

.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

To activate the menu, displaying or hiding the navigation list when it is clicked, we use the jQuery library. Here is the click event of the button that contains the class top and jQuery “toggleClass” function, adding or removing the “nav-active” class from the menu, making it visible or invisible.

 $('#toggle').click(function() {
		$(this).toggleClass('toggle-active');
		$('#overlay').toggleClass('nav-active');
	});

“ The script is compatible and support in some browsers like google chrome, and not support in IE6 .”

How to create a Mouse Interaction using Java script ?

Mouse Interact

This demo will describe about Mouse Interaction. Mouse Interaction is nothing but Animate a Container on Mouse Over Using Perspective and Transform. (or)
if you wanted to move the background-image on an element as you mouse over it. The container will animate or move

To achieve this we are using CSS and java script. The JavaScript language was initially created for web browsers. While as CSS language for describing the presentation of a document written in a markup language like HTML.

HTML

<div class="moving-zone">
    <div class="popup">
        <div class="popup-content">
            <div class="popup-text">
                I'm a new kind of <b>popup</b>.<br/>
                Move your <b>mouse</b> around !
            </div>
        </div>
    </div>

In this demo we created class like .moving-zone, .popup, .popup-content, .popup-text.

CSS

.moving-zone {<br>
    position: absolute;<br>
    top:50%; left:50%;<br>
    width:300px; height:120px;<br>
    margin: -60px 0 0 -150px;<br>
    perspective: 800px;<br>
}<br>
.popup {<br>
    position: absolute;<br>
    width:300px;<br>
    padding:2px;<br>
    box-sizing: border-box;<br>
    cursor: pointer;<br>
    transform-style: preserve-3d;<br>
    background: -webkit-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:    -moz-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:     -ms-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:      -o-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:         linear-gradient(top left, white 50%, #bccbff 50%);<br>
}<br>
.popup:before {<br>
    content: '';<br>
    position: absolute;<br>
    left:5%; top:5%;<br>
    width:90%; height:90%;<br>
    border-radius: inherit;<br>
    background: rgba(0,0,0,.2);<br>
    box-shadow: 0 0 40px 20px rgba(0,0,0,.2);<br>
    transform: translateZ(-100px);<br>
}<br>
.popup-content {<br>
    background: #586697;<br>
    padding: 20px;<br>
    box-sizing: border-box;<br>
}<br>
.popup-text {<br>
    color: white;<br>
    font-family: 'Roboto', sans-serif;<br>
    font-size: 20px;<br>
    line-height: 30px;<br>
    font-weight: 100;<br>
    text-align: center;<br>
    transform: translateZ(15px);<br>
}<br>
.popup-text b {<br>
    color:#bccbff;<br>
    font-weight: 300;<br>
}

In .moving-zone class we defined properties like top, width, margin, perspective, height. The position is absolute for both class moving-zone and popup. Those classes are used to create a box which is in the middle of the demo.

Handler Functions

These functions handle the events as they happen. We want to decide what happens when the cursor enters, moves over, and leaves the container, so each of those has a handler.

Event

This is a JavaScript object that describes the event that occurred.

Java Script

var moveForce = 30; // max popup movement in pixels
var rotateForce = 20; // max popup rotation in deg

$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height();

    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;

    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);

    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
});

If you do not interact with the iframe, you will see only a box on the screen. As soon as you start moving your mouse or your finger, you can see the animation.
finally,
In this demo we uses an box / container to animate, but this can be used for other things besides container including forms, modals, images.