Transition on hover-CodePudding

How can I make smooth animation when I hover my icon, transition from left to right. I try with transition but that didn't work. Sorry for my bad english.

.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 ></i>
</body>
</html>

CodePudding user response：

Please check the updated HTML and CSS below:

.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 ><span>Početna</span></i>
</body>

</html>

CodePudding user response：

The best way would be to use translate on a child element. That way, when you hover, it doesn't affect the hoverable area by moving it:

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

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