悬停时的过渡

Question

当我将鼠标悬停在图标上，从左到右过渡时，如何制作流畅的动画。我尝试过渡，但那没有用。抱歉我的英语不好。

.menu-icon {
    height: auto;
    background-color: tomato;
    padding: 10px;
    fill: white;
    border-radius: 100px;
}

.menu-icon:hover::after {
    content: 'Početna';
    font-size: 0.7em;
    vertical-align: middle;
    transition: 300ms;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <i class="fas fa-home fa-2x menu-icon"></i>
</body>
</html>

Answer 1

最好的方法是在子元素上使用 translate。这样，当您悬停时，它不会因移动而影响可悬停区域：

.logo span {
  transition: all 0.3s ease;
  transform: translateX(0);
  transform-origin: left;
  display: inline-block;
}

.logo:hover span {
   transform: translateX(100);
}

Answer 2

请检查下面更新的 HTML 和 CSS：

.menu-icon {
  height: auto;
  background-color: tomato;
  padding: 10px;
  fill: white;
  border-radius: 100px;
}

span {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width 300ms linear;
}

i:hover span {
  width: 110px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <i class="fas fa-home fa-2x menu-icon"><span>Početna</span></i>
</body>

</html>

悬停时的过渡

Transition on hover

html

css

animation

transition