CSS Animation Complete Tutorial

learn CSS animations

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

What are CSS Animations?

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

CSS is the one of my favorable language, and it help me a lot in doing designing on the web and to developer the good website and today in this article i have complete tutorial for CSS based on beginners friendly so lets take a look on the this CSS animation tutorial

CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash! and we can use CSS animations with the help of these CSS animation properties

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The following example binds the "example" animation to the

element. The animation will last for 4 seconds, and it will gradually change the background-color of the
element from "red" to "yellow":

 /* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Note: The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the

element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

 /* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

The following example will change both the background-color and the position of the

element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

 /* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Delay Animation

CSS allow you to delay animation which means that you can set time to start the CSS animation

EXAMPLE

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

here as you can see there a property name as animation-delay it help you to set that before start this animation please wait for 2s and the start the animation it help really well when we want a certain code run after a time.

Set How Many Times an Animation Should Run

if you know you can write a code from the upper codes then you can see that all the animation are run only at a time but we can also set the how many time all the animation should you want to run

example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

now here you can see that animation-iteration-count property are use here we use this property to set how many time we want to run the code so now here this animation is working for 3 time only

Animation in Reverse Direction

as we can also the the animation is reverse direction also that help us than want to write the animation to run from the opposite direction or something like alternative direction so lets take a look at all also

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

now here you can see that animation-direction is used to run the animation in the revirese direction as well so in this way we can use this properity also

Specify the Speed Curve

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

  • ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear - Specifies an animation with the same speed from start to end
  • ease-in - Specifies an animation with a slow start
  • ease-out - Specifies an animation with a slow end
  • ease-in-out - Specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Some Website for CSS animations

so now we learn many things about the css animations and now its time to learn about some website that help you to write to code more faster then before so lets take a look also

Animate.style

its a open source website that provide amazing normal css style that make you code better then before.

Some Website for CSS animations

Animate.css is described as 'bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness' and is an app in the Development category. There are more than 10 alternatives to Animate.css for a variety of platforms, including Self-Hosted solutions, JavaScript, the Web, Opera and jQuery. The best alternative is vov.css, which is both free and Open Source. Other great apps like Animate.css are GSAP (Free Personal, Open Source), Popmotion (Free, Open Source), Animista (Free) and DynCSS (Free, Open Source).

animista

Animista is described as 'place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use' and is an website in the Development category. There are eight alternatives to Animista, not only websites but also apps for a variety of platforms, including Self-Hosted solutions, Mac, Windows and Linux. The best alternative is Animate.css, which is both free and Open Source. Other great sites and apps similar to Animista are DynCSS (Free, Open Source), Magic Animations CSS3 (Free, Open Source), AniJS (Free, Open Source) and CSShake (Free, Open Source).

Some Website for CSS animations

so these are the website and note for my YouTube video which i upload tomorrow

No Comments Yet