CSS Animations with 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;
}
                    