Animation in CSS3

To create an animation in CSS3, you can use the @keyframes rule to define the animation, and then apply the animation to an element using the animation property.

@keyframe - Basic Syntax Of Animations

'@keyframe' keyword is used to define the animation in css . basic syntax of animation keyframe in css is here

@keyframes your_animation_name {
    0%{
        /* css code */
    }
    100%{
        /* css code  */
    }
}

Here is an example of a simple animation that makes a square element change its background color from red to blue:

@keyframes colorChange {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.square {
  width: 100px;
  height: 100px;
  animation: colorChange 2s ease-in-out forwards;
}

Here's a list of some of the most commonly used properties of the animation property:

• animation-name: Specifies the name of the @keyframes animation.
• animation-duration: Specifies the duration of the animation in seconds (s) or milliseconds (ms).
• animation-timing-function: Specifies the speed curve of the animation. Common values are "ease", "linear", "ease-in", "ease-out", "ease-in-out".
• animation-delay: Specifies a delay before the animation starts.
• animation-iteration-count: Specifies the number of times the animation should be played. The default value is 1. To make the animation run indefinitely, set the value to "infinite".
• animation-direction: Specifies whether or not the animation should play in reverse on alternate cycles. Possible values are "normal", "reverse", "alternate", and "alternate-reverse".
• animation-fill-mode: Specifies what values are applied by the animation outside the time it is executing. Possible values are "none", "forwards", "backwards", "both".
• animation-play-state: Specifies whether the animation is playing or paused. Possible values are "running" and "paused".

Implementation Of Css Animation

using keyframe animation name syntax

selector{
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

Example Of Css Animation

here is the example which moves a div right and left with animation direction.

div{
    animation: move_right 5s infinite alternate-reverse;
}

Example Of Keyframe Name Of Css Animation

create a keyframe animation name

 @keyframes move_right {
    0%{
        margin-left: 100px;
    }
    100%{
        margin-left: 500px;
    }
}

 

---