Animations

• CSS keyframe syntax:

@keyframes animation-name {
  from { property: value; }     /* 0% */
  to { property: new_value; }  /* 100% */
}

• CSS syntax to attach an animation:

selector {
  animation: name, duration, delay, count, ...;
  /* OR */
  animation-name: ...;
  animation-duration: ...,;
  /* ... */
}

• The transition CSS property also allows us to smoothly change some property’s values.

• Examples:

/* transition */
p {
  background-color: red;
}
p:hover {
  background-color: orange;
  transition: background-color 2s;
}

/* keyframes */
rect:hover {
  animation: 2s linear slide-in;
}
@keyframes slide-in {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(70%);
  }

  100% {
    transform: translateX(100%);
  }
}