CSS Animations with Keyframes

Create complex animations using CSS keyframes

Introduction to CSS Animations

CSS animations allow you to create smooth transitions and dynamic effects without using JavaScript. They work by gradually changing CSS properties over a specified duration.

CSS animations consist of two components:

Keyframes: Define the stages and styles of the animation
Animation Properties: Specify how the animation should behave (duration, timing, etc.)

@keyframes animation-name {
  0% { /* styles at start */ }
  50% { /* styles at middle */ }
  100% { /* styles at end */ }
}

.element {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}
                    

Basic Animations

Here are some fundamental animations that demonstrate different property changes:

Fade

Opacity Change

Slide

Position Change

Scale

Size Change

Rotate

Rotation

Color

Color Change

/* Fade animation */
.fade {
  animation: fade 3s infinite;
}

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

/* Slide animation */
.slide {
  animation: slide 3s infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}
                    

Animation Properties

CSS provides several properties to control how animations behave:

animation-name: Specifies the name of the @keyframes rule
animation-duration: Defines how long the animation takes to complete one cycle
animation-timing-function: Specifies the speed curve of the animation
animation-delay: Defines when the animation will start
animation-iteration-count: Specifies how many times the animation should run
animation-direction: Defines whether the animation should play forward, backward, or alternate
animation-fill-mode: Specifies what styles are applied before and after the animation
animation-play-state: Allows pausing and resuming the animation

Timing Functions

The timing function controls the acceleration of the animation:

Linear

linear

Ease

ease (default)

/* Animation with different timing functions */
.timing-linear {
  animation: slide 3s infinite;
  animation-timing-function: linear;
}

.timing-ease {
  animation: slide 3s infinite;
  animation-timing-function: ease;
}
                    

Complex Animations

By combining multiple keyframes and properties, you can create more complex and interesting animations:

Bounce

Bouncing Effect

Pulse

Pulsing Effect

Shake

Shaking Effect

/* Bounce animation */
.bounce {
  animation: bounce 1s infinite;
}

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

/* Shake animation */
.shake {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
                    

Multiple Animations

You can apply multiple animations to a single element by separating them with commas:

Multiple

Color + Pulse

/* Multiple animations */
.multiple {
  animation: 
    color-change 3s infinite,
    pulse 1.5s infinite;
}
                    

Animated Text

Animations can be applied to text for creative typography effects:

A n i m a t e d T e x t

/* Animated text with wave effect */
.text-wave .animated-text {
  animation: wave 1s infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
                    

Loading Animations

Animations are commonly used to create loading indicators:

/* Spinner animation */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(94, 114, 228, 0.2);
  border-top-color: #5e72e4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

Hover Animations

Animations can be triggered on hover for interactive elements:

Grow

Rotate

Shadow

Color

/* Hover animations */
.hover-grow:hover {
  transform: scale(1.2);
}

.hover-rotate:hover {
  transform: rotate(45deg);
}

.hover-shadow:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.hover-color:hover {
  background-color: #ea5455;
}
                    

Animation Shorthand

The animation property is a shorthand for all animation properties:

/* Animation shorthand syntax */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

/* Example */
.shorthand {
  animation: bounce 1s ease-in-out infinite alternate;
}
                    