CSS Transitions

CSS transitions allow you to create smooth and elegant animations between different states of an element. This is done by specifying the properties to animate, the duration of the animation, and the type of transition to use.

There are four main properties that can be animated in CSS:

  • background-color
  • color
  • opacity
  • transform

Each of these properties can be animated in a different way, but they all follow the same basic syntax. Here is an example of how to create a background color transition:

.button {
  background-color: #ff0000;
  transition: background-color 1s ease;
}

.button:hover {
  background-color: #00ff00;
}

In this example, the background color of the element with the button class will be animated when the mouse hovers over it. The transition property is used to specify the property that should be animated (background-color), the duration of the animation (1 second) and the type of transition to be used (ease).

You can use different transition types to create different effects. Here are some of the most common transition types:

  • ease: starts slow, speeds up, then slows down at the end.
  • linear: keeps the same speed throughout the animation.
  • ease-in: starts slow and speeds up at the end.
  • ease-out: starts fast and slows down at the end.
  • ease-in-out: starts slow, speeds up in the middle and slows down at the end.

In addition, you can specify different durations for the animation depending on the state of the element. For example, you can create a faster transition when the mouse leaves the element:

.button {
  background-color: #ff0000;
  transition: background-color 1s ease;
}

.button:hover {
  background-color: #00ff00;
  transition-duration: 0.5s;
}

.button:active {
  background-color: #0000ff;
  transition-duration: 0.2s;
}

In this example, the background color transition has a duration of 1 second by default, but is shortened to 0.5 seconds when the mouse hovers over the element and to 0.2 seconds when the element is clicked.

CSS transitions are a great way to add a little interactivity to your designs. With a little practice, you can create smooth, elegant animations that enhance the user experience.

Now answer the exercise about the content:

_What is the basic syntax for creating a transition in CSS?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image CSS Transformations

Next page of the Free Ebook:

27CSS Transformations

4 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text