CSS Transitions and Animations

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

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.

CSS transitions allow you to change property values smoothly over a specified duration. This can make your web pages feel more dynamic and engaging.

The transition property is a shorthand property for four properties:

• transition-property: Specifies the name of the CSS property the transition effect is for.
• transition-duration: Specifies how many seconds or milliseconds the transition effect takes to complete.
• transition-timing-function: Specifies the speed curve of the transition effect.
• transition-delay: Defines when the transition effect will start.

Here's an example of a CSS transition that changes the background-color of a <div> over 2 seconds when you hover over it:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: background-color;
  transition-duration: 2s;
}

div:hover {
  background-color: blue;
}

Or, using the shorthand transition property:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s;
}

div:hover {
  background-color: blue;
}

The transition-timing-function property can have the following values: linear, ease, ease-in, ease-out, ease-in-out, or you can specify your own cubic-bezier function.

Or, using the shorthand transition property:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 2s ease-in-out 0.5s;
}

While CSS transitions are the simplest way to create an animation, CSS animations allow for more complex, multi-step animations that can even be paused and rewound.

CSS animations make it possible to animate the values of CSS properties over time, using keyframes. The animation is created by gradually changing from one set of CSS styles to another.

You need to bind the animation to an element. This is done using the animation property and @keyframes rule.

The animation property is a shorthand property for eight properties:

• animation-name: Specifies the name of the @keyframes animation.
• animation-duration: Specifies how long an animation should take to complete.
• animation-timing-function: Specifies the speed curve of the animation.
• animation-delay: Specifies a delay for the start of an animation.
• animation-iteration-count: Specifies the number of times an animation should be played.
• animation-direction: Specifies whether an animation should be played forwards, backwards or in alternate cycles.
• animation-fill-mode: Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
• animation-play-state: Specifies whether the animation is running or paused.

Within the @keyframes definition you can have as many intermediate waypoints as you want.

Example:

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

div {
  animation: slide 2s infinite;
}

Here, the div will move 100px to the right and then back to its original position continuously every 2 seconds.

The @keyframes rule specifies the animation code.

Here's an example of a CSS animation that gradually changes the background-color and width of a <div>:

@keyframes example {
  0%   {background-color: red; width: 0px;}
  100% {background-color: yellow; width: 100%;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
}

Or, using the shorthand animation property:

@keyframes example {
  0%   {background-color: red; width: 0px;}
  100% {background-color: yellow; width: 100%;}
}

div {
  width: 100px;
  height: 100px;
  animation: example 4s;
}

Animations and transitions give you a powerful tool to create dynamic, engaging web pages. They can be used to draw attention to important elements, provide feedback, create a sense of spatial relationships, and much more.