CSS Transition after animation ends

Refresh

November 2018

Views

8.6k time

4

I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.

Is it possible to get it to transition back after we mouse off and the animation ends?

You can see an example here: 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);
        }
    }
evu

2 answers

3

Как Гарри отметил , что проблема в том , что вы анимировать / переход такое же свойство, в данном случае 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>
4

Я раздвоенный свой проект и адаптировать его , чтобы он работает. Вы можете найти это здесь.

То, что я изменил следующее:

Даю белый квадрат стартовую позицию top: 150pxи пусть он, на hoverиз div, получить 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-в и парить-аут не имеет никакого эффекта, кроме того, что таймер может быть досрочно прекращен, но анимация не будет продолжаться (или обратным, что вы хотели) после этого. transitionэто действие на основе, что означает , что он получает срабатывает каждый раз , когда действие (например :hover) происходит. На :hoverэто означает , что нужно .5s , чтобы перейти к top:0и , когда парение заканчивается, он принимает .5s к надо top:150px.

Я надеюсь, что вышеупомянутая дополнение имеет смысл :)

Как вы можете видеть, я также очищено немного в вашей и animation-name:т.д., так как могут быть объединены в одну строку.