The button hover color gradient is set to smoothly change in background-color and color within 0.3 seconds through transition, and can achieve natural transition with ease function, and add box-shadow to enhance three-dimensionality; 2. The image enlargement effect uses transform: scale(1.1) and transition: transform 0.4s ease to achieve hover zoom to avoid layout re-arrangement. It is recommended that the parent container set overflow: hidden to prevent overflow; 3. The underscore sliding effect uses pseudo-element::after to create an underscore with an initial width of 0 and center. When hover, the transition is simultaneously transitioned through transition to both sides; 4. The display/hide menu uses a transition animation from max-height to the preset maximum value (such as 200px), combined with overflow: hidden implementation content expands and closes. Although max-height needs to be estimated, it has good compatibility; 5. The button shadow and bit movement painting are unifiedly controlled by transition: all 0.2s ease and translateY (-2px) and shadow improvement in hover, and translateY (1px) and shadow reduction in active. Simulate the button to pop up and press feedback. It is recommended to clearly list the properties to optimize performance; the basic syntax of transition is property duration timing-function delay, and common attributes include background-color, opacity, transform, etc. The easing function has ease, linear, ease-in-out and cubic-bezier custom curves. Multi-attribute transitions can be separated by commas to ensure that the animation is delicate and natural.

CSS transition is a powerful tool to enable smooth animation effects when elements change states. It is often used in interactive scenarios such as hovering and clicking. Here are some practical and common CSS transition examples that are suitable for direct use in projects.

1. Button hover color gradient

Let the buttons change slowly when they hover, and the background color changes slowly to enhance the clicking feeling.

 .btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
  color: #ffff;
}

• Description : transition sets the change duration of background-color and color to 0.3 seconds, and it is more natural to use ease easing function.
• Tips : You can add box-shadow changes to enhance the three-dimensional sense.

2. Picture enlargement (zoom effect)

The picture is slightly enlarged when hovering, and is often used in portfolios or product pictures.

 .img-hover {
  width: 200px;
  height: 150px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.img-hover:hover {
  transform: scale(1.1);
}

• Key points :
  • Use transform: scale() to avoid affecting the layout (no reordering is triggered).
  • transition acts on the transform property.
• Optimization : Can cooperate with overflow: hidden parent container to prevent overflow.

3. Underline sliding effect (navigation link)

Text underscores spread from the center to both sides, which are commonly found in modern navigation menus.

 .nav-link {
  position: relative;
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  display: inline-block;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #007bff;
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

• Principle : Create an underscore through pseudo-element ::after , with the initial width 0, centered; the width is full when hovering, and left is moved to 0.
• Visual highlights : More dynamic than direct border-bottom .

4. Show/Hide Menu (Height Transition)

Let the drop-down menu or folding panel have an animation of expanding and closing. Note: height: auto cannot transition and requires skilled processing.

 .collapse-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: #f8f9fa;
  padding: 0 10px;
}

.collapse-menu.open {
  max-height: 200px; /* estimated maximum height*/
}

• HTML structure example :

 <div class="collapse-menu" id="menu">
  <p>This is expandable. </p>
</div>
<button onclick="toggle()">Switch</button>

• JS Control :

 function toggle() {
  document.getElementById('menu').classList.toggle('open');
}

• Limitations : If max-height is too large, the animation time may be inaccurate, but this is the most compatible solution at present.

5. Animation of button shadow and displacement combination

The button "bounces" effect when clicking or hovering to enhance interactive feedback.

 .btn-press {
  background-color: #28a745;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-press:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-press:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

• :hover lifts the shadow
• :active press effect
• transition: all concise but pay attention to performance. It is recommended to list properties clearly

Tips: Detailed explanation of transition attributes

 transition: property duration timing-function delay;

• Common properties : background-color , opacity , transform , width , height , box-shadow
• Easing function :
  • ease : default, fast first and then slow
  • linear : uniform speed
  • ease-in / ease-out / ease-in-out
  • cubic-bezier(.4,0,.2,1) : Custom curve
• Multiple attribute writing methods :

 transition: 
  background-color 0.3s ease,
  transform 0.2s ease,
  box-shadow 0.2s ease;

Basically, these common and practical transition usages. The key is to choose the right attributes, time and easing so that the interaction is naturally not abrupt. Not complicated, but the details determine the texture.

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