Transforms and Animations Properties in CSS

Transforms and animations in CSS enable dynamic changes and effects on elements, adding interactivity and visual appeal to your web designs.

Transform Properties

1. transform

• Applies transformations to an element, such as translation, rotation, scaling, and skewing.

• Values: Multiple transform functions separated by spaces.

  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
  

2. transform-origin

• Defines the origin point of the transformation, specifying the point around which transformations occur.

• Values: Length (e.g., px, em), Percentage (%), Keywords (center, top, bottom, left, right).

  transform-origin: top left;
  

3. translateX, translateY, translateZ

• Moves an element along the X, Y, or Z axis.

• Values: Length (e.g., px, em), Percentage (%).

  transform: translateX(50px);
  

4. rotate

• Rotates an element around its origin.

• Values: Angle (e.g., deg, rad, turn).

  transform: rotate(45deg);
  

5. scaleX, scaleY, scaleZ

• Scales an element along the X, Y, or Z axis.

• Values: Number (e.g., 1.5), Percentage (%).

  transform: scale(1.5);
  

6. skewX, skewY

• Skews an element along the X or Y axis.

• Values: Angle (e.g., deg, rad).

  transform: skewX(20deg);
  

7. perspective

• Defines the perspective from which a 3D element is viewed.

• Values: Length (e.g., px, em).

  perspective: 1000px;
  

8. perspective-origin

• Defines the origin point for the perspective effect.

• Values: Length (e.g., px, em), Percentage (%).

  perspective-origin: 50% 50%;
  

Animation Properties

1. animation

• A shorthand property for setting all animation-related properties.

• Values: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>.

  animation: slide 2s ease-in-out 1s infinite alternate;
  

2. animation-name

• Specifies the name of the keyframes animation.

• Values: Name of the keyframes defined with @keyframes.

  animation-name: slide;
  

3. animation-duration

• Defines the length of time an animation takes to complete one cycle.

• Values: Time (e.g., s, ms).

  animation-duration: 3s;
  

4. animation-timing-function

• Describes how the animation progresses over its duration.

• Values: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).

  animation-timing-function: ease-in;
  

5. animation-delay

• Sets the delay before the animation starts.

• Values: Time (e.g., s, ms).

  animation-delay: 1s;
  

6. animation-iteration-count

• Specifies the number of times an animation should repeat.

• Values: Number, infinite.

  animation-iteration-count: infinite;
  

7. animation-direction

• Defines whether an animation should play forwards, backwards, or alternate between the two.

• Values: normal, reverse, alternate, alternate-reverse.

  animation-direction: alternate;
  

8. animation-fill-mode

• Specifies how a CSS animation should apply styles to its target before and after it is executing.

• Values: none, forwards, backwards, both.

  animation-fill-mode: forwards;
  

9. animation-play-state

• Specifies whether an animation is running or paused.

• Values: running, paused.

  animation-play-state: paused;