The hover button is enlarged to achieve interactive effects through transform: scale() and transition; 2. Fade in animation using @keyframes fadeIn with animation: forwards to maintain the final state; 3. Infinite rotation icon uses transform: rotate() and border differences to create loading effects; 4. Left and left jitter prompts move between 25% and 75% keyframes through translateX to generate warning feedback; 5. Slide up and down banners from negative values to 0 to slide into vision; 6. Text typewriter effect simulates verbatim input through width gradient and steps() and adds cursor flashing; 7. Pulse aperture uses scale and opacity to achieve breathing highlighting prompts; all animations should focus on performance optimization to avoid excessive use interfering with user experience, and the final effect should be natural and smooth and serve functions.

CSS animation is an important means to improve user experience in web design. Through @keyframes and animation attributes, we can achieve various smooth and natural visual effects. Below are some practical and common CSS animation examples for reference by beginners and advanced developers.

1. Scale Animation

Commonly used for buttons or icons, slightly enlargement when hovering, increasing the sense of interaction.

 .btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.btn:hover {
  transform: scale(1.1);
}

Use transform: scale() and transition to achieve smooth zooming, which is more efficient than directly changing width/height .

2. Fade In

A gradual effect from transparent to opaque when a page is loaded or an element appears.

 @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

forwards means that the animation is maintained at the last frame state after the end to prevent flashbacks.

3. Spin Animation

Suitable for loading icons or rotating logos.

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

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

This is a classic "loading circle" effect that uses the color difference of the border to create a sense of rotation.

4. Shake Animation prompt

Used for form error prompts or button click feedback.

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

.shake {
  animation: shake 0.5s ease-in-out;
}

Suitable for short and eye-catching feedback animations, do not overuse them to avoid disturbing users.

5. Slide In from Top

Commonly found in the notification bar or the top prompt bar.

 @keyframes slideInTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.banner {
  background: #ff6b6b;
  color: white;
  padding: 15px;
  text-align: center;
  animation: slideInTop 0.6s ease-out;
}

The animation slides in from the top of the screen, and the automatic hiding effect is better with timing.

6. Typewriter Effect

Simulates the animation of text input verbatim.

 .typewriter {
  overflow: hidden;
  border-right: 2px solid black;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.1em;
  animation: 
    typing 3.5s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}

Note: This effect requires that the element is block or inline-block and set fixed width or parent container limits.

7. Pulse Animation

Commonly used for focus prompts or new feature guidance.

 @keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  70% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.95);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 1.5s infinite ease-in-out;
}

Can be used to highlight the Click here or New Message icon.

A brief description of commonly used animation properties:

Basically, these common and practical animation examples. You can copy these codes into the project and use them directly, and then fine-tune the time, color, or size according to the design. The key is to keep the animation natural and not interfere with user operations .

Small suggestions: Consider using will-change or transform for complex animations to improve performance, avoid frequent re-arrangement and redrawing.

The above is the detailed content of css animation examples. For more information, please follow other related articles on the PHP Chinese website!