Detailed explanation of CSS image transition properties: transition and background-image

Detailed explanation of CSS image transition properties: transition and background-image

Introduction:
In modern web design, transition effects are an important technology to improve user interaction experience . Among them, image transition effects play an important role in beautifying web pages and improving user experience. This article will introduce in detail two commonly used image transition properties: transition and background-image, and provide specific code examples to help readers understand and apply them.

1. Transition transition attribute:

1. transition-duration (transition time):
   The transition-duration attribute specifies the duration of the transition effect, in seconds (s) or Milliseconds (ms). The following is a sample code to achieve the fade-in effect of the image from scratch when the mouse is hovering over the image:

.img-container {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
}

.img-container:hover {
  opacity: 1;
}

2. transition-delay (transition delay):
   transition The -delay attribute specifies the time to wait for the transition effect to begin. The following is a sample code to achieve the effect of gradually enlarging the image after a delay of 0.5s when the mouse is hovering over the image:

.img-container {
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}

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

3. transition-timing-function (transition easing function) :
   The transition-timing-function attribute specifies the easing function of the transition effect. Commonly used easing functions include ease (gradually accelerates and then decelerates), linear (constant speed), ease-in (gradually accelerates), ease-out (gradually decelerates), etc. The following is a sample code to realize that when the mouse is hovering over the picture, the picture moves from top to bottom in a relatively slow deceleration manner:

.img-container {
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

.img-container:hover {
  transform: translateY(0);
}

2. background-image background image transition

1. Use pseudo elements and transition to achieve background image transition:
   Using pseudo elements and transition, we can achieve the transition effect of background images. The following is a sample code to achieve the effect of the background image gradually appearing when the mouse hovers over the div:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg');
  transition: opacity 0.5s;
  opacity: 0;
}

.container:hover::before {
  opacity: 1;
}

2. Use CSS animation to achieve background image transition:
   In addition to using transition, we can also use CSS animation to achieve the transition effect of the background image. The following is a sample code to achieve the effect of gradually displaying the background image when the mouse hovers over the div:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg');
  animation: fade-in 0.5s;
  opacity: 0;
}

.container:hover::before {
  opacity: 1;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Summary:
This article introduces two commonly used image transition attributes: transition and background-image, and provides detailed code examples to help readers understand and apply. By rationally using these attributes, we can achieve a variety of image transition effects, adding beauty and user experience to web design. I hope this article can be helpful to readers and enable you to better apply these technologies in practice.

The above is the detailed content of Detailed explanation of CSS image transition properties: transition and background-image. For more information, please follow other related articles on the PHP Chinese website!