CSS Animation Cheat Sheet

Here’s a CSS animation cheat sheet covering key properties and concepts:

Animation Properties

@keyframes:

• Define animation steps.

@keyframes slide {
  0% { left: 0; }
  100% { left: 100px; }
}

animation-name:

• Name of the @keyframes.

.element {
  animation-name: slide;
}

animation-duration:

• Duration of the animation.

.element {
  animation-duration: 2s;
}

animation-timing-function:

• Timing function (e.g., ease, linear, ease-in).

.element {
  animation-timing-function: ease-in-out;
}

animation-delay:

• Delay before the animation starts.

.element {
  animation-delay: 1s;
}

animation-iteration-count:

• Number of times the animation should run (e.g., infinite).

.element {
  animation-iteration-count: infinite;
}

animation-direction:

• Direction of the animation (e.g., normal, reverse, alternate).

.element {
  animation-direction: alternate;
}

animation-fill-mode:

• Specifies how styles are applied before/after the animation.

.element {
  animation-fill-mode: both;
}

animation-play-state:

• Pauses or resumes an animation.

.element:hover {
  animation-play-state: paused;
}

Shorthand Property

animation:

• Shorthand for all animation properties.

.element {
  animation: slide 2s ease-in-out 1s infinite alternate both;
}

Transformations

transform:

• Apply transformations like translate, rotate, scale.

.element {
  transform: translateX(100px) rotate(45deg) scale(1.5);
}

Transition for Smooth Changes

transition:

• Create smooth transitions between property values.

.element {
  transition: all 0.3s ease-in-out;
}

transition-property:

• Specify which property to transition.

.element {
  transition-property: opacity, transform;
}

transition-duration:

• Set the duration of the transition.

.element {
  transition-duration: 0.5s;
}

transition-timing-function:

• Define the timing function for the transition.

.element {
  transition-timing-function: ease-in-out;
}

transition-delay:

• Delay before the transition starts.

.element {
  transition-delay: 0.2s;
}

Animating Specific Properties

@keyframes for Specific Properties:

• Animate specific properties within @keyframes.

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

Animating Opacity:

.element {
  animation: fade 2s ease-in-out infinite alternate both;
}

@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Animating Colors:

.element {
  animation: colorChange 3s infinite;
}

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

This cheat sheet provides a quick reference for creating CSS animations. Adjust the values and properties based on your specific animation requirements.