index<--

CSS Animation

CSS animations allow you to create smooth, gradual changes to the appearance of an element over time. For example, you could use CSS animations to make a button fade in or out, or to change the color of an element from one color to another.

CSS animations are more complex than transitions. They require you to specify the start and end states of the animation, as well as the timing and easing of the animation.

Animation Example

Here is an example of a CSS animation that fades in a button over a period of 2 seconds:

#animated_button {
  background-color: green;
  color: white;
  transition: opacity 2s;
}

#animated_button:hover {
  animation: fade-in 2s linear;
  background-color: purple;
}

Animation Rules

CSS animations allow you to create dynamic and interactive web pages. They can be used to animate the properties of any element, including the position, size, color, and opacity of an element.

The "@keyframes" rule is used to define animation sequences in CSS. It is a semantic rule, which means that it has a specific meaning and purpose. The syntax for the "@keyframes" rule is as follows:

@keyframes animation-name {
  from {
    ...
  }
  to {
    ...
  }
}

The "animation-name" property is the name of the animation sequence. The "from" and "to" keywords define the start and end states of the animation. The "..." in the code snippets above represents the CSS properties that will be animated.

Here is an example of a "@keyframes" rule that animates the width of an element from 0 to 100px over a period of 1 second:

@keyframes width-animation {
  from {
    width: 0px;
  }
  to {
    width: 100px;
  }
}

To use this animation, you would add the following code to your CSS:

.element {
  animation: width-animation 1s linear;
}

The "animation" property specifies the name of the animation sequence to use. The "1s" property specifies the duration of the animation in seconds. The "linear" property specifies the timing function for the animation.

Animation Properties

In next table we list all animation properties with description. Use these properties in CSS to create the animation rules.

CSS Transitions

CSS transitions allow you to create smooth, gradual changes to the appearance of an element when its properties are changed. For example, you could use CSS transitions to make an element grow or shrink when its width or height is changed.

CSS transitions are simpler than animations. They only require you to specify the start and end states of the transition. The timing and easing of the transition are handled automatically by the browser.

Transition Example

Here is an example of a CSS transition that changes the color of an element from red to blue over a period of 1 second:

  #transition_button {
    height:50px;
    width: 150px;
    background-color: green;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.8s ease-in-out;
    border-radius: 5px;
  }
  
  #transition_button:hover {
    background-color: purple;
  }

Transition Rules

CSS transitions allow you to create smooth animations between the states of an element. They are a more lightweight way to create animations than CSS animations, and they are also more efficient.

The syntax for CSS transition rules is as follows:

transition: property duration timing-function delay;

The "property" property specifies the property that will be animated. The "duration" property specifies the duration of the animation in seconds. The "timing-function" property specifies the timing function for the animation. The "delay" property specifies the delay before the animation starts.

The "width" property specifies the property that will be animated. The "1s" property specifies the duration of the animation in seconds. The "linear" property specifies the timing function for the animation. The "0s" property specifies the delay before the animation starts.

Here is a table that summarizes the syntax and semantic of CSS transition rules:

Transition Properties

In next table we list all transition properties with description. Use these properties in CSS to create the transition rules.

External Resources

Our article show you only the essential. For deep dive in the topic you have to study the original CSS documentation created by Mozila organization. We use these resources ourselves to make this tutorial:

For more information on CSS animations and transitions, please see the following external resources:

• CSS Animations (MDN)
• CSS Animations - W3Schools
• CSS Transitions (MDN)
• CSS Transitions - W3Schools

<!-- Let's do some HTML hacking: -->
<p>
   Good job. You have made it here. Now, right click on page to open context menu.
   Now search for menu option "View page source"  (Ctrl+U) and press it.
   Or you can inspect a particular element by pressing "Inspect Element" (Ctrl+Shift+I).
<\p>

Read next: Bootstrap Framework