CSS Animations - Animate HTML Elements using CSS

CSS animation is a way to animate the values of CSS properties over a period of time. It allows you to create smooth, visually appealing transitions between different states of an element, such as hover, active, or focus states, as well as transitions between different pages or sections of a website.

CSS animation is done using the @keyframes rule, which defines the stages of the animation and the properties that will change at each stage. The animation property is then used to apply the animation to an element, and various other properties, such as animation-duration, animation-timing-function, and animation-delay, can be used to control the behavior of the animation.

Here is an example of a simple CSS animation that changes the background colour of a button when it is hovered over:

button {
  /* other styles */
  background-color: blue;
  animation: color-change 0.5s;
}

@keyframes color-change {
  from {
    background-color: blue;
  }
  to {
    background-color: red;
  }
}

button:hover {
  animation-play-state: running;
}

In this example, the color-change animation is defined using the @keyframes rule, and it changes the background color of the button from blue to red over 0.5 seconds. The animation property is used to apply the animation to the button, and the animation-play-state property is used to start the animation when the button is hovered over.

CSS animation can be used to create a wide variety of effects, such as simple hover states, complex page transitions, and more. It is a powerful tool for adding motion and visual interest to web pages and applications.

CSS Animation Using Percentage Values:

In CSS animation, the @keyframes rule allows you to specify the values of CSS properties at specific points in the animation using percentage values. These percentage values represent the progress of the animation, with 0% being the start of the animation and 100% being the end.

Here is an example of a CSS animation that scales an element up and down using percentage values:

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.scaling-element {
  animation: scale 1s linear infinite;
}

In this example, the scale animation is defined using the @keyframes rule. It has three stages: at 0%, the element is scaled to its normal size (1x); at 50%, it is scaled up to 1.5x its normal size; and at 100%, it is scaled back down to its normal size. The animation property is then used to apply the scale animation to the element with a duration of 1 second, a linear timing function, and an infinite loop.

You can also use percentage values in combination with the from and to keywords to define an animation. For example, the following animation is equivalent to the one above:

@keyframes scale {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  to {
    transform: scale(1);
  }
}

.scaling-element {
  animation: scale 1s linear infinite;
}

Using percentage values in CSS animation allows you to have fine-grained control over the values of CSS properties at different points in the animation, which can be very useful for creating complex, smooth transitions.