CSS — Part-8 Transitions and Animations

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

div without transition

div on width transition on hover

Change Several Property Values

div {
  transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

It can have the following values:-

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

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

div {
  transition-delay: 1s;
}

Transition + Transformation

div {
  transition: width 2s, height 2s, transform 2s;
}

Transition Shorthand Property

The CSS transition properties can be specified one by one:-

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

With shorthand:-

div {
  transition: width 2s linear 1s;
}

CSS Animations

• An animation lets an element gradually change from one style to another.
• Keyframes hold what styles the element will have at certain times.
• To get an animation to work, you must bind the animation to an element.

/* 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;
}

• The default value of animation-duration is 0s (0 seconds), so if no animation-duration is specified, no animation will occur.
• “from” and “to” (which represents 0% (start) and 100% (complete)).
• we can also use percentages to change the style at different points.

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

The background-color of the element attached to the animation will change when the animation is 25% complete, 50% complete, and again when the animation is 100% complete

Delay an Animation

• The animation-delay property specifies a delay for the start of an animation.

animation-name: example;
animation-duration: 4s;
animation-delay: 2s;

• Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.

animation-delay: -2s;

Set How Many Times an Animation Should Run

• The animation-iteration-count property specifies the number of times an animation should run.

animation-iteration-count: 3;

• The following example uses the value “infinite” to make the animation continue for ever:

animation-iteration-count: infinite;

Run Animation in Reverse Direction or Alternate Cycles

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

How these values function:-

• normal - The animation is played as normal (forwards). This is default
• reverse - The animation is played in reverse direction (backwards)
• alternate - The animation is played forwards first, then backwards
• alternate-reverse - The animation is played backwards first, then forwards

for animation-direction: normal , the style changes from 0% — 25% — 50% — 100%

for animation-direction: reverse, the style changes from 100% — 50% —25% — 0%

for animation-iteration-count: 2 and animation-direction: alternate, the style changes from 0% — 25% — 50% — 100% and then from 100% — 50% — 25% — 0%

for animation-iteration-count: 2 and animation-direction: alternate-reverse, the style changes from 100% — 50% — 25% — 0% and then from 0% — 25% — 50% — 100%

Specify the Speed Curve of the Animation

• The animation-timing-function property specifies the speed curve of the animation.
• Values- ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

1. animation-timing-function: ease
   - default value
   - Specifies an animation with a slow start, then fast, then end slowly
2. animation-timing-function: linear
   - Specifies an animation with the same speed from start to end
3. animation-timing-function: ease-in
   -Specifies an animation with a slow start
4. animation-timing-function: ease-out
   - Specifies an animation with a slow end
5. animation-timing-function: ease-in-out
   - Specifies an animation with a slow start and end

Specify the fill-mode For an Animation

• The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
• Values- none, forwards, backwards, both

1. animation-fill-mode: none
   - default value
   - Animation will not apply any styles to the element before or after it is executing
2. animation-fill-mode: forwards
   - The element will retain the style values that is set by the last keyframe
3. animation-fill-mode: backwards
   - The element will get the style values that is set by the first keyframe
4. animation-fill-mode: both
   - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

div {
  animation-name: example; 
  animation-fill-mode: forwards;
}
@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}

In the above example, the <div> element stays at the position top:200px even after the animation ends.
Without animation-fill-mode: forwards, the <div> element would have returned back to position top: 0px.

Animation Shorthand Property

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Shorthand:-

div {
  animation: example 5s linear 2s infinite alternate;
}