Difference Between transition and animation in CSS .

Some people think that transition and animation is similar or both of them working similar, but they aren't . Let's see the what is the difference between both of them.

What is Transition

Image From
As the above image implies, you can understand that the transition simply means the movement or changing the position. In transition element change its state/position from one. CSS transition are best choice for the from-to movement of the element. Transition element have two states from (actual position) and to(destination on the element).
Using transition you can add simple action to your site . Transition is the simple way to add animation in CSS .You tell css to change the element with the given duration of time .

CSS transition have this properties
Property -- Description

• transition-property -- the CSS property that should transition
• transition-duration -- the duration of the transition
• transition-timing-function -- the timing function used by the animation (common values: linear, ease). Default value is ease
• transition-delay -- optional number of seconds to wait before starting the animation.

shorthand property for transition

.element {
  transition: property duration timing-function delay;
}

simple example of transition

#element {
  background-color: black;
  transition-property: font-size;
  transition-duration: 6s;
  transition-delay: 3s;
}
#element:hover {
  background-color: blue;
}

Above example performs a six-second background color transition with a three-second delay between the time the user mouses over the element and the beginning of the animation effect.

What is Animation

An animation gives you the facility to change element state in many movements. You can change as many CSS properties you want, as many times you want . Animation gives you more control over the property values. It is not limited to a single movement like CSS Transitions .
For using CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. Between 0% to 100% you can add as many as movements you wants .

An animation is applied to an element using the animation property.

.container {
  animation: rotate 10s linear infinite;
}

rotate is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed) and to repeat it infinitely.

@keyframes rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}

In this case we instruct CSS to make the transform property to rotate the Z axis from 0 to 100 grades.

Value Description

• animation-name Specifies the name of the keyframe you want to bind to the selector
• animation-duration Specifies how many seconds or milliseconds an animation takes to complete
• animation-timing-function Specifies the speed curve of the animation
• animation-delay Specifies a delay before the animation will start
• animation-iteration-count Specifies how many times an animation should be played
• animation-direction Specifies whether or not the animation should play in reverse on alternate cycles
• animation-fill-mode Specifies what values are applied by the animation outside the time it is executing
• animation-play-state Specifies whether the animation is running or paused
• initial -Sets this property to its default value.
• inherit -Inherits this property from its parent element. Read about inherit

shorthand property for transition

.element{ animation: name duration timing-function delay iteration-count direction fill-mode play-state; }

Thank You !!!