Show List
Tutorials > CSS > CSS Transitions and Animations

CSS Transitions and Animations

CSS Transitions and Animations allow you to add an animated effect to an element's style when a property changes. With Transitions and Animations, you can make changes to an element's style smoothly over time, instead of abruptly.

Here are some basic examples of using CSS Transitions:

  1. Simple Transition: To create a simple transition, you need to specify the property you want to animate and the duration of the transition. For example:
.element {
   background-color: red;
   transition: background-color 1s;
}

.element:hover {
   background-color: blue;
}
  1. Multiple Transitions: To animate multiple properties, you can specify multiple transitions separated by a comma. For example:
.element {
   background-color: red;
   width: 100px;
   height: 100px;
   transition: background-color 1s, width 2s, height 2s;
}

.element:hover {
   background-color: blue;
   width: 200px;
   height: 200px;
}

Here are some basic examples of using CSS Animations:

  1. Simple Animation: To create a simple animation, you need to specify the @keyframes for the animation and the animation properties for the element. For example:
@keyframes animation-name {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.element {
   animation-name: animation-name;
   animation-duration: 2s;
}
  1. Multiple Animations: To apply multiple animations to an element, you can specify multiple animation properties separated by a comma. For example:
@keyframes animation1 {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@keyframes animation2 {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.element {
   animation-name: animation1, animation2;
   animation-duration: 2s;
}
These are just a few examples of using CSS Transitions and Animations. You can use them in many different ways to create a variety of animated effects for your web pages.


Next: CSS Media Queries

    Leave a Comment

  • captcha text