CSS Animations

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Animations

CSS Animations are a powerful tool for web developers to create visually appealing and dynamic web pages. They allow for a wide range of effects to be created and can be used to enhance the overall user experience of a website.

This is different from traditional animations, which are created using a combination of HTML and JavaScript. CSS Animations are much easier to use and more efficient, as they allow for complex animations to be created with minimal code.

CSS Animations are used to create a variety of effects, such as transitions, rotations, scaling, and fading. They can also be used to create complex animations, such as animated logos or 3D effects.

CSS Animations are created using the @keyframes rule. This rule defines the start and end points of the animation, as well as the intermediate steps. The animation is then triggered using the animation property, which specifies the duration and timing of the animation.

It is relatively easy to use. The @keyframes rule is simple to understand and the animation property is straightforward.

To define an animation in css you should use this syntax.

@keyframes animationName {
  from {css properties}
  to {css properties} 
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: animationName;
  animation-duration: 2s;
}
//Example 1:
@keyframes mytest {
  from { background-color: yellow; }
  to { background-color: green; }
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: mytest;
  animation-duration: 2s;
}
//Example 2:
@keyframes mytest2 {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: mytest2;
  animation-duration: 2s;
}
Example 3:
  div {
    width: 120px;
    height: 50px;
    background-color: green;
    position: relative;
    animation-name: mytest3;
    animation-duration: 3s;
    animation-delay: 2s;
  }
  
  @keyframes mytest3 {
    0%   {background-color:#ff4499; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:#cc99ff; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }

CSS Animations can be used to enhance the user experience of a website in a variety of ways. For example, they can be used to create subtle effects that draw the user’s attention to a particular element on the page. They can also be used to create more complex animations that add interest and interactivity to a page.