创建 CSS 动画以实现悬停在元素上的平滑过渡效果？

Question

创建 CSS 动画，以实现悬停在元素上时的平滑过渡效果，这意味着悬停在元素上时应该出现过渡。

我无法在悬停时创建平滑的动画/过渡效果，我想在悬停在元素上时制作平滑且干净的悬停效果。

Answer 1

使用

transition

属性为元素添加平滑过渡：CSS Transition Property

一个例子：

.normal {
  width: 100px;
  height: 100px;
  background: #ddd;
  text-align: center;
}

.smooth {
  width: 100px;
  height: 100px;
  background: black;
  color: white;
  text-align: center;
  transition: width 3s;
}

.smooth:hover,
.normal:hover {
  width: 200px;
}

<div class="normal">Normal Transition</div>
<div class="smooth">Smooth Transition</div>

或者你可以使用 CSS 动画

div {
  width: 100px;
  height: 100px;
  background-color: black;
  color: white;
  text-align:center;
}

div:hover {
  animation-name: animation1;
  animation-duration: 3s;
}

@keyframes animation1 {
  from {
    width: 100px;
  }
  to {
    width: 200px;
  }
}

<div>Hover</div>