CSS transition after animation ends

Question

I have a css transition that moves an element on hover and an animation that also rotates an element on hover. There, the delay in the animation is equal to the duration of the transition, so that after it moves to the correct position, the animation starts. And this works well, however, when we turn off, the animation stops, but it does not jump back.

Can I get it back after turning off the mouse and ending the animation?

Here you can see an example: http://codepen.io/jhealey5/pen/zvXBxM

Simplified code here:

    div {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        background-color: #b00;
        position: relative;

        &:hover {
            span {
                transform: translateY(-60px);
                animation-name: rotate;
                animation-duration: 1s;
                animation-delay: .5s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        }
    }

    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto;
        transition: .5s;
    }

    @keyframes rotate {
        from {
            transform: translateY(-60px) rotate(0);
        }
        to {
            transform: translateY(-60px) rotate(-90deg);
        }
    }

Answer 1

, . .

:

top: 150px hover of div a top: 0. transition: top .5s top: 0; top: 150px;, .

translateY(-60px); , , animation.

CSS:

div {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    background-color: #b00;
    position: relative;

    &:hover {
        span {
            top: 0px;
            animation: rotate 1s infinite .5s alternate;
            animation-direction: alternate;
        }
    }
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    bottom: 10px;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    transition: top .5s;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-90deg);
    }
}

: , , , , , , keyframes . Hover-in hover-out , , , ( , ) . transition , , , (, :hover). :hover , 5 , top:0, , 5 , top:150px.

, :)

, animation-name: .., .

Answer 2

, , / , transform. , Chrome/FF animation , transition. , - / . , / , bottom. , , , ( ).

div:hover  span {
  bottom: 80px;
}

---

span, .

.wrapper translateY(-60px) , span .

div {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  background-color: #b00;
  position: relative;
}
div:hover .wrapper {
  transform: translateY(-60px);
}
div:hover .wrapper span {
  animation-name: rotate;
  animation-duration: 1s;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.wrapper {
  display: inline-block;
  transition: .5s;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
.wrapper span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-90deg);
  }
}

<div>
  <span class="wrapper">
	  <span></span>
  </span>
</div>