Переход из анимации

Итак, в этом простом примере можно сказать, что у вас есть элемент, который на hover имеет анимацию, которая перемещает ее вправо. Затем, когда мышь перемещается вместо того, чтобы прыгать прямо в исходное положение, она переходит обратно в это состояние.Переход из анимации

#test{ 
 
    position:absolute; 
 
    left:0; 
 
    transition:left 3s linear; 
 
} 
 
#test:hover{ 
 
    animation:move 4s linear; 
 
} 
 
@keyframes move{ 
 
    0%{ 
 
    left:0; 
 
    } 
 
    100%{ 
 
    left:300px; 
 
    } 
 
}

<div id="test">Hover</div>

Результат не работает в любом либо Краю или Chrome. Firefox работает, но только на первой анимации. Любые последующие анимации не будут работать, пока вы не обновите страницу. Так это возможно? И почему Firefox работает один раз, а затем останавливается?

Так что я более ясный, это простой пример. Конечно, это можно сделать только с переходами, но переходы ограничены и не всегда возможны. Также, если вы заметите, что анимация возврата невозможна, так как она может быть из произвольной точки.

источник

2017-01-21 qw3n

Вместо использования свойств анимации и перехода вы можете выполнить это, используя свойство перехода.

#test{ 
    position:absolute; 
    left: 0; 
    transition: left 4s linear; 
} 
#test:hover{ 
    left: 300px; 
    transition: left 4s linear; 
}

Проблема, с которой вы сталкиваетесь, заключается в том, что анимация должна завершиться, чтобы перейти в другое состояние. Кроме того, когда вы выталкиваете другую анимацию, нужно добавить в селектор без зависания, который оживляет от 300 пикселей до 0px. Чтобы исправить это, просто используйте свойство перехода внутри селекторов hover и non-hover. Тем не менее, это действительно только решение из 2 состояний. Если вам нужен более подробный контроль над анимацией, вы, вероятно, захотите создать две отдельные анимации для перемотки вперед и назад.

источник

2017-01-21 22:39:24

Это простой пример, не все может быть сделано только с переходом. – qw3n

@ qw3n Да, однако большинство анимаций может. Вы можете объединить анимации вместе и оживить почти каждое свойство css. Для более сложных анимаций уверенная анимация ключевых кадров дает вам больше контроля, но за то, что вы попросили, свойство перехода только выполняет его. Что еще вы хотите сделать, чтобы вы не использовали переход? –

Основная причина заключается в том, что вы не можете анимировать неизвестную начальную точку. В этом примере, если вы покинете анимацию посередине, это не способ узнать, что происходит с точки зрения анимации. Переходы на самом деле не заботятся о начале, они просто работают до конца. – qw3n

Просто используйте transition в селекторе без зависания. Нет необходимости в animation здесь.

#test { 
 
    position:absolute; 
 
    left: 0; 
 
    transition: left 4s linear; 
 
} 
 
#test:hover { 
 
    left: 300px; 
 
}

<div id="test">Hover</div>

источник

2017-01-21 22:58:57 TheYaXxE

Это простой пример, не все может быть сделано только с переходом. – qw3n

ответ

Смежные вопросы