Animatable Properties in CSS Reference

Animatable properties in CSS allow you to create dynamic and visually appealing animations on web elements. This guide will provide a detailed reference on animatable properties, ranging from basic transitions to more advanced keyframe animations.

Basic Transition Properties

Transition Property

The 'transition' property specifies which property to animate and the duration of the animation.

				
					div {
  transition: width 0.5s ease-in-out;
}

Transition Duration

Control the duration of the transition.

				
					div {
  transition-duration: 1s;
}

Transition Timing Function

Define the timing function for the transition (e.g., ease, linear, ease-in).

				
					div {
  transition-timing-function: ease-out;
}

Basic Transition Examples

Changing Color on Hover

Smoothly transition the color on hover.

				
					button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

Scaling on Hover

Enlarge an element on hover.

				
					img {
  transition: transform 0.5s ease-in-out;
}

img:hover {
  transform: scale(1.2);
}

Keyframe Animations

@keyframes Rule

Create a set of keyframes for a complex animation.

				
					@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

Animation Property

Apply the animation to an element.

				
					div {
  animation: slide 2s ease-in-out infinite;
}

Advanced Keyframe Animation

Animation Delay

Introduce a delay before the animation starts.

				
					div {
  animation: slide 2s ease-in-out 1s infinite;
}

Animation Direction

Control the direction of the animation (normal, reverse, alternate).

				
					div {
  animation: slide 2s ease-in-out infinite alternate;
}

Transform Property

Transform Translate

Move an element along the x and y axes.

				
					div {
  transform: translate(50px, 20px);
}

Transform Rotate

Rotate an element.

				
					div {
  transform: rotate(45deg);
}

CSS Filter Effects

Filter Property

Apply visual effects like blur, grayscale, or brightness.

				
					img {
  filter: grayscale(50%);
}

Filter Transition

Transition between different filter effects.

				
					img {
  transition: filter 0.5s ease-in-out;
}

img:hover {
  filter: blur(5px);
}

Motion Path Animation

Motion Path Property

Animate an element along a specified path.

				
					div {
  animation: pathAnimation 4s linear infinite;
}

@keyframes pathAnimation {
  0% {
    motion-offset: 0%;
  }
  100% {
    motion-offset: 100%;
  }
}

CSS Variables in Animations

Animating CSS Variables

Use CSS variables to control animations dynamically.

				
					:root {
  --main-color: red;
}

div {
  background-color: var(--main-color);
  transition: background-color 0.5s ease-in-out;
}

div:hover {
  --main-color: blue;
}

Understanding animatable properties in CSS opens the door to creating engaging and interactive web experiences. From basic transitions to complex keyframe animations, these techniques allow you to breathe life into your web pages. Experiment with different properties, durations, and timing functions to achieve the desired visual effects. Happy coding! ❤️