CSS3 Animation Cheatsheet

CSS3 provides powerful features to create animations, including transition, transform, and animation.

Transitions

CSS transitions allow smooth changes between property values over a specified duration.

Transition Properties

Property	Description	Example
`transition`	Shorthand for all transition properties.	`transition: all 0.5s ease;`
`transition-property`	Specifies the property to transition.	`transition-property: background-color;`
`transition-duration`	Defines the duration of the transition.	`transition-duration: 0.5s;`
`transition-timing-function`	Defines the speed curve.	`transition-timing-function: ease-in-out;`
`transition-delay`	Specifies a delay before the transition starts.	`transition-delay: 0.3s;`

Example: Transition

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: green;
}

CSS Transforms

CSS transforms allow manipulation of elements in 2D or 3D space using translation, rotation, scaling, skewing, or a combination of these.

Transform Functions

Function	Description	Example
`translate(x, y)`	Moves an element along the x and y axes.	`transform: translate(50px, 100px);`
`translateX(x)`	Moves an element along the x-axis.	`transform: translateX(100px);`
`translateY(y)`	Moves an element along the y-axis.	`transform: translateY(50px);`
`rotate(angle)`	Rotates an element by a specified angle (in degrees).	`transform: rotate(45deg);`
`scale(x, y)`	Scales an element by x and y factors.	`transform: scale(1.5, 2);`
`scaleX(x)`	Scales an element horizontally by x factor.	`transform: scaleX(1.2);`
`scaleY(y)`	Scales an element vertically by y factor.	`transform: scaleY(0.8);`
`skew(x-angle, y-angle)`	Skews an element along the x and y axes.	`transform: skew(30deg, 10deg);`
`skewX(x-angle)`	Skews an element along the x-axis.	`transform: skewX(20deg);`
`skewY(y-angle)`	Skews an element along the y-axis.	`transform: skewY(15deg);`
`matrix(a, b, c, d, e, f)`	Combines all transformations in a single function.	`transform: matrix(1, 0, 0, 1, 50, 50);`

Transform Origin

The transform-origin property sets the point of origin for the transformation. By default, this is the center of the element.

Property	Description	Example
`transform-origin`	Specifies the origin of transformations.	`transform-origin: 50% 50%;`
Values	Keywords (`left`, `top`, `center`, etc.) or percentage/length values.	`transform-origin: bottom right;`

2D vs 3D Transforms

CSS also supports 3D transforms for more advanced effects.

Function	Description	Example
`perspective(n)`	Specifies perspective for 3D transforms.	`transform: perspective(500px);`
`rotateX(angle)`	Rotates an element around the x-axis.	`transform: rotateX(45deg);`
`rotateY(angle)`	Rotates an element around the y-axis.	`transform: rotateY(45deg);`
`rotateZ(angle)`	Rotates an element around the z-axis (same as `rotate`).	`transform: rotateZ(45deg);`
`scaleZ(z)`	Scales an element along the z-axis.	`transform: scaleZ(2);`
`translateZ(z)`	Moves an element along the z-axis.	`transform: translateZ(50px);`

Example: Transform

.card {
  width: 200px;
  height: 200px;
  background-color: coral;
  transform: scale(1.2) rotate(15deg) translate(20px, 30px);
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1) rotate(0deg) translate(0px, 0px);
}

CSS Keyframe Animations

Keyframe animations allow for creating complex animations by defining intermediate steps between the start and end states.

Animation Properties

Property	Description	Example
`animation`	Shorthand for all animation properties.	`animation: fadeIn 2s ease-in-out 1;`
`animation-name`	Specifies the name of the keyframes to use.	`animation-name: fadeIn;`
`animation-duration`	Specifies the duration of the animation.	`animation-duration: 2s;`
`animation-timing-function`	Defines the speed curve of the animation.	`animation-timing-function: ease-in;`
`animation-delay`	Specifies the delay before the animation starts.	`animation-delay: 1s;`
`animation-iteration-count`	Number of times the animation repeats.	`animation-iteration-count: infinite;`
`animation-direction`	Specifies whether the animation reverses on alternate cycles.	`animation-direction: alternate;`
`animation-fill-mode`	Defines how styles are applied before/after the animation.	`animation-fill-mode: forwards;`
`animation-play-state`	Specifies whether the animation is running or paused.	`animation-play-state: paused;`

Keyframes Syntax

Keyframes define the intermediate steps for an animation using percentages or keywords like from and to.

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Key Animation Properties

`animation-timing-function` Values

The animation-timing-function property controls the pace of an animation.

Value	Description
`ease`	Starts slow, speeds up in the middle, and slows down at the end.
`linear`	Maintains a constant speed throughout.
`ease-in`	Starts slowly and accelerates.
`ease-out`	Starts quickly and decelerates.
`ease-in-out`	Starts and ends slowly, with acceleration in the middle.
`steps(n, start/end)`	Divides the animation into `n` discrete steps.

`animation-direction` Values

The animation-direction property specifies the direction in which the animation runs.

Value	Description
`normal`	Animation plays forwards, from start to finish.
`reverse`	Animation plays backwards, from end to start.
`alternate`	Animation alternates between forwards and backwards on each iteration.
`alternate-reverse`	Animation alternates, starting in reverse on the first iteration.

Other Key Animation Properties

Property	Description	Example
`animation-fill-mode`	Specifies how the animation applies styles before and after execution.	`animation-fill-mode: forwards;`
`animation-delay`	Specifies a delay before the animation starts.	`animation-delay: 1s;`
`animation-iteration-count`	Defines how many times the animation should repeat.	`animation-iteration-count: infinite;`
`animation-play-state`	Specifies if the animation is running or paused.	`animation-play-state: paused;`

Example: Combining Key Animation Properties

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  animation: bounce 3s ease-in-out infinite alternate;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

Transitions​

Transition Properties​

Example: Transition​

CSS Transforms​

Transform Functions​

Transform Origin​

2D vs 3D Transforms​

Example: Transform​

CSS Keyframe Animations​

Animation Properties​

Keyframes Syntax​

Key Animation Properties​

animation-timing-function Values​

animation-direction Values​

Other Key Animation Properties​

Example: Combining Key Animation Properties​