Difference Between transition and animation in CSS .
Tags: css, html, transition, animation
Published: 2021-03-08 15:15:59

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**

![transitin](https://coursework.vschool.io/content/images/2016/08/transition_example2.png)

[Image From](https://coursework.vschool.io/content/images/2016/08/transition_example2.png)
        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**

![animation](https://res.cloudinary.com/practicaldev/image/fetch/s--HLCG8XKx--/c_imagga_scale,f_auto,fl_progressive,h_720,q_auto,w_1280/https://dev-to-uploads.s3.amazonaws.com/i/54ydb37tzyny06ac8xdf.jpg)
       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 !!!