CSS Animation/Transition实现Logo分步旋转及悬停模糊效果求助

Hey there! Since you're just getting started with CSS animations and transitions, let's walk through exactly how to build the effect you want—no jargon overload, promise.

Step 1: Basic HTML Structure #

First, let's set up your logo element. You can use an <img> tag or a <div> with a background image—either works. Here's the simple img version:

<img src="your-logo-path.png" alt="Brand Logo" class="animated-logo">

Step 2: Build the Rotation Animation #

We'll use CSS @keyframes to define the multi-stage rotation, then apply it to your logo. Let's break down your requirements:

• 1s to rotate 180° → first 1/6 of our total animation cycle (since total duration is 1+2+3=6s)
• Next 2s to rotate another 180° (total 360°) → next 2/6 = 1/3 of the cycle
• Stay still for 3s → final 3/6 = 1/2 of the cycle

Here's the CSS for the animation:

/* Define the keyframe sequence */
@keyframes logo-spin {
  0% {
    transform: rotate(0deg); /* Start at 0 rotation */
  }
  16.67% {
    transform: rotate(180deg); /* End first rotation at 1s (1/6 of 6s) */
  }
  50% {
    transform: rotate(360deg); /* Complete full rotation at 3s (1+2s) */
  }
  100% {
    transform: rotate(360deg); /* Stay at full rotation for the final 3s */
  }
}

/* Apply the animation to your logo */
.animated-logo {
  width: 200px; /* Adjust to your logo's size */
  height: auto;
  animation: logo-spin 6s infinite forwards; 
  /* 6s = total duration | infinite = repeat forever | forwards = keep final state */
}

Step 3: Add the Hover Blur Effect #

For the hover blur, we'll use the filter property plus a transition to make the effect smooth (instead of a sudden jump):

.animated-logo:hover {
  filter: blur(5px); /* Adjust blur amount to your preference */
  transition: filter 0.3s ease; /* Smooth transition over 0.3 seconds */
}

/* Optional: Keep the smooth transition when hover ends */
.animated-logo {
  transition: filter 0.3s ease;
}

Quick Tweaks for Customization: #

• Adjust the 6s animation duration if you want faster/slower cycles
• Change blur(5px) to a smaller/larger number for more/less blur
• If your logo doesn't rotate around its center, add transform-origin: center; to .animated-logo (most elements default to center, but just in case!)

内容的提问来源于stack exchange，提问作者Michael Miyazuki