CSS Animations

With CSS animations, you can create dynamic and interactive effects for your website. CSS animations are usually used to emphasize certain elements on a page or to attract the user's attention to important actions.

The keyframes rule is used to create CSS animations, which define the different stages of the animation. In the keyframes rule, you can specify the values of different properties over a specific period of time, causing the element's properties to change as the animation progresses.

The animation is initiated by using the animation rule, which specifies the duration of the animation, the number of repetitions, and other parameters. You can also define the speed, delay, and other properties of the animation in the animation rule.

CSS animations allow you to create various effects, such as moving elements, color changes, disappearances, and appearances. However, it is important to consider the use of animations when designing a webpage, as excessive animation can slow down the page loading and disrupt the user experience.

CSS animations are an effective way to enhance the visual appearance of a website and make it more dynamic and interactive. Using animations, you can stand out from other websites and make your site more interesting for users.

Example

Here is an example CSS animation with two animatable elements: the first one rotates continuously and the second one moves in an arc. You can change the duration, repetition count, and other properties of the animations by modifying the CSS rules. Comments in the code clarify its functionality.

.cube {
      width: 50px;
      height: 50px;
      background-color: #4285f4;
      position: relative;
      animation-name: spinning;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes pyorizing {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .arc movement {
      width: 50px;
      height: 50px;
      background-color: #db4437;
      position: relative;
      animation-name: arc movements;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes arc moves {
      0% {
        left: 0;
        top: 0;
      }

      25% {
        left: 100px;
        top: 0;
      }

      50% {
        left: 100px;
        top: 100px;
      }

      75% {
        left: 0;
        top: 100px;
      }

      100% {
        left: 0;
        top: 0;
      }
    }

Practice