CSS 55 💻 animation property

a - animation property intro
animation property can be used to create animations for HTML elements
It is a shorthand for animation-name, animation-duration, animation-timing-function...
animation-delay, animation-iteration-count, animation-direction, animation-fill-mode...
animation-play-state and animation-timeline
syntax → animation: name duration timing-function delay iteration-count direction fill-mode play-state;
@keyframes are used to create the animation
@keyframes exampleAnimation { } → defines key frames animation
animation-name: exampleAnimation; → uses the defined keyframs animation

b - @keyframes rule
@keyframes rule  is used to define the animation code
It can be applied to an element using the animation property
It allows you to create smooth transitions and animations by specifying keyframes, which are the stages of an animation.
syntax →
  @keyframes example {
        from { /* 0% start state */ }
           to { /* 100% end state */ }
 }
alternative syntax →
  @keyframes example {
   0% {
     /* CSS properties at the start of the animation */
   }
   50% {
     /* CSS properties halfway through the animation */
   }
   100% {
     /* CSS properties at the end of the animation */
   }
 }
@keyframes example → The name of the animation (example in this case).
The keyframe blocks (from, to, or percentages) that define the animation's stages.

#css #css3 #csscourse #html #html5 #omg