将鼠标悬停在一个 div 上以触发另一个 div 中的动画

Question

This is for my navbar on my personal website. I have my name displayed on the left side of the Navbar. I am trying to make a "wave effect" so that when I hover over my name (made of spans nested in a div), it will trigger the animations of the spans. Is there a better approach to this?

My Navbar now: Imagine each character going up and back down when I hover across my name.

Part of React file:

<Navlink to="/" exact={true} className={styles['title-link']}>
<div className={styles.title}>
        <span className={styles.animate1}>L</span>
        <span className={styles.animate2}>e</span>
        <span className={styles.animate3}>e</span>
        <span> </span>
        <span className={styles.animate4}>R</span>
        <span className={styles.animate5}>e</span>
        <span className={styles.animate6}>n</span>
        <span> </span>
        <span className={styles.animate7}>J</span>
        <span className={styles.animate8}>i</span>
        <span className={styles.animate9}>e</span>
      </div>
</Navlink>

Part of SCSS file:

  .title-link {
      position: relative;
      right: 275px;
      text-decoration: none;
    }

 .title {
     color: white;
      font-family: 'Cedarville Cursive', cursive;
      text-decoration: none;
     font-size: 30px;
   }

 .title:hover {
      span:first-child {
        animation-delay: 0.11s;
      }
      span:nth-child(2) {
        animation-delay: 0.22s;
      }
      span:nth-child(3) {
        animation-delay: 0.33s;
      }
      span:nth-child(5) {
        animation-delay: 0.44s;
      }
      span:nth-child(6) {
        animation-delay: 0.55s;
      }
      span:nth-child(7) {
        animation-delay: 0.66s;
      }
      span:nth-child(9) {
        animation-delay: 0.77s;
      }
      span:nth-child(10) {
        animation-delay: 0.88s;
      }
      span:nth-child(11) {
        animation-delay: 0.99s;
      }
  }

.animate1, .animate2, .animate3, .animate4, .animate5, .animate6, .animate7, .animate8, .animate9{
  animation-name: bounce;
  animation-duration: 1s;
}

@keyframes bounce {
  0% {
      bottom: 0;
  }
  50% {
      bottom: 5px;
  }
  100% {
      bottom: 0;
  }
}

Answer 1

I got your example working using css (not scss, counldnt find a fiddle host that allowed scss).

I think the main problem was using spans - they dont appear to animate inline elements. So I used a div with display: inline-block

http://jsfiddle.net/vdmpqawj/4/

<div id="title">
  <div class="animate1">L</div>
  <div class="animate2">e</div>
  <div class="animate3">e</div>
  <div class="animate4">R</div>
  <div class="animate5">e</div>
  <div class="animate6">n</div>
  <div class="animate7">J</div>
  <div class="animate8">i</div>
  <div class="animate9">e</div>
</div>

@-webkit-keyframes bounce {

  0%,
  100% {
    -webkit-transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-5px);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

#title:hover > div:first-child {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
}

#title:hover > div:nth-child(2) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.11s;
}

#title:hover > div:nth-child(3) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.22s;
}

#title:hover > div:nth-child(4) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.33s;
}

#title:hover > div:nth-child(5) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.44s;
}

#title:hover > div:nth-child(6) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.55s;
}

#title:hover > div:nth-child(7) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.66s;
}

#title:hover > div:nth-child(8) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.77s;
}


#title:hover > div:nth-child(9) {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.88s;
}


#title {
  color: black;
  font-family: 'Cedarville Cursive', cursive;
  text-decoration: none;
  font-size: 30px;
}

#title > div {
  display: inline-block;
}