CSS3 Transition

HTML structure

<div class="box1">  
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

First, set a transition on the element, specifying the style and duration. Here, all styles are set to use a 0.3s transition

.box1>div{
  /* Add transition animation to all changes on the element; you can also specify a single property */
  transition: all .3s;
}

Hover over the elements to test the effects

Width transition

.div1:hover{width: 150px;}

Background color transition

.div2:hover{background: #999;}

Bezier curve transition

/* Bezier curve transition */
.div3{transition-timing-function: cubic-bezier(.39,.62,.74,1.39)}
.div3:hover{transform: translate3d(-25px, -25px, 0)}

Bezier Curve cubic-bezier(x1,y1,x2,y2)

By adjusting the Bezier curve, you can create various animation effects, such as bounce effects. The X-axis range is 0~1; the Y-axis range is not strictly defined, but should not be too large. For example: linear, i.e., cubic-bezier(0,0,1,1)

Bezier curve online tool: https://cubic-bezier.com/#.17,.67,.83,.67

Reference: https://www.w3school.com.cn/css3/index.asp