#icon:hover + #text transition for + #text part

Question

When I hover over the icon text should appear, so far so good, however I want it to smoothly transition into view. I can't seem to find a way to do that.

#vegicon {
  opacity: 0.6;
  transition: 0.5s;
  color: mediumseagreen;
  margin-left: 7px;
}

#vegicontext {
  display: none;
  font-family: 'Lato', sans-serif;
  color: mediumseagreen;
  font-size: 0.9em;
  margin-left: 1px;
}

#vegicon:hover {
  opacity: 1;
  text-shadow: 1px 1px 2px darkgray;
}

#vegicon:hover+#vegicontext {
  display: inline;
}

<span id="vegicon"><i class="fas fa-seedling"></i></span>
<span id="vegicontext">Veggy</span>

Answer 1

You cannot animate the display property, but you can animate opacity.

Also, you need to add transition for the animation, such as transition: opacity .5s ease-in;

#vegicon{
  opacity: 0.6;
  transition: 0.5s;
  color: mediumseagreen;
  margin-left: 7px;
}

#vegicontext{
  opacity:0;
  font-family: 'Lato', sans-serif;
  color: mediumseagreen;
  font-size: 0.9em;
  margin-left: 1px;
  transition: opacity .5s ease-in;
}

#vegicon:hover{
  opacity: 1;
  text-shadow: 1px 1px 2px darkgray;
}

#vegicon:hover + #vegicontext{
  opacity:1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

 <span id="vegicon"><i class="fas fa-seedling"></i></span>
<span id="vegicontext">Veggy</span>

You could also animated the max-width property, but make sure your max-width is not less than the widest element you're animating:

.container {
  display: flex;
}

.icon-container {
  display: flex;
}

.vegicon{
  opacity: 0.6;
  transition: 0.5s;
  color: mediumseagreen;
  margin-left: 7px;
}

.vegicontext{
  opacity: 0;
  overflow: hidden;
  max-width: 0;
  font-family: 'Lato', sans-serif;
  color: mediumseagreen;
  font-size: 0.9em;
  margin-left: 2px;
  transition: all .5s ease-in;
}

.vegicon:hover{
  opacity: 1;
  text-shadow: 1px 1px 2px darkgray;
}

.vegicon:hover + .vegicontext {
  opacity: 1;
  /* this may need to be changed depending on the max length of your text */
  max-width: 50px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="container">
  <div class="icon-container">
    <span class="vegicon"><i class="fas fa-seedling"></i></span>
    <div class="vegicontext">Veggy</div>
  </div>
  <div class="icon-container">
    <span class="vegicon"><i class="fas fa-seedling"></i></span>
    <div class="vegicontext">Veggy</div>
  </div>
   <div class="icon-container">
    <span class="vegicon"><i class="fas fa-seedling"></i></span>
    <div class="vegicontext">Veggy</div>
  </div>
</div>