Воспроизведение CSS анимации при наведении, пауза при наведении - PullRequest
Новая
       30

Воспроизведение CSS анимации при наведении, пауза при наведении

10 голосов
/ 13 января 2012

Я пытаюсь

  • Воспроизведение анимации при наведении.
  • ПАУЗА анимации при наведении (то есть не возвращаться к кадру 0).

Разве нельзя использовать -webkit-animation-play-state: paused; в родительском div?

См. пример здесь , когда вы зависаете, он возвращается к кадру 0.

Я не хочу использовать JS.

Ответы [ 4 ]

11 голосов
/ 13 января 2012

пример jsfiddle

установить анимацию на #tech с приостановленным воспроизведением 

#tech {
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

затем измените состояние воспроизведения на ход при наведении 

#tech:hover{
    -webkit-animation-play-state:running;
}
3 голосов
/ 20 сентября 2016

Я тоже искал это, и ответ @ MikeM привел меня туда, куда мне нужно было идти, и с комментарием @ HellGate к этому ответу относительно Chrome:

вам нужно состояние паузы после анимации, иначе оно не работает

Меня интересовало, как приостановить анимацию на листе спрайтов PNG, когда он был неактивен, ипродолжить / возобновить при наведении курсора, поэтому принятый ответ помог в этом отношении.

Вот демонстрация, показывающая, как это можно сделать на листе спрайтов PNG (кредиты на спрайт и оригинальный CSS идут Гилу Эрнандесу иего удивительный пост в блоге здесь ): CodePen .

Важные части CSS: 

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  -webkit-animation: monsterAnimation .8s steps(10) infinite;
  animation: monsterAnimation .8s steps(10) infinite;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

.monster:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

@keyframes monsterAnimation {
  100% { background-position: -1900px; }
}
0 голосов
/ 06 августа 2015

У меня недостаточно репутации, чтобы комментировать другие ответы.Что ж.Способ @MikeM работает, но он сделал небольшую ошибку.Посмотрите: 

#tech {
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

Это не работает и не должно работать.Анимированная стенограмма перекрывает animation-play-state.Вам нужно изменить порядок этих строк, чтобы все заработало

0 голосов
/ 30 декабря 2014

Проверьте JSFiddle здесь: http://jsfiddle.net/fRzwS/373/.

Анимация не останавливается, потому что позднее определение animation перезаписывает значение свойства animation-play-state.Согласно спецификации W3C , animation: 

The 'animation' shorthand property is a comma-separated list of 
  animation definitions, each of which combines seven of 
  the animation properties into a single component value.

И семь свойств: 

<single-animation> = <single-animation-name> || <time> 
  || <single-animation-timing-function> 
  || <time> || <single-animation-iteration-count> || <single-animation-direction> 
  || <single-animation-fill-mode> || <single-animation-play-state>

Это похоже на свойства background иbackground-color.

Итак, в исходном коде: 

#tech {
    -webkit-animation-play-state: paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

Свойство animation-play-state установлено в paused.Однако позднее свойство animation перезаписывает это значение значением по умолчанию running.Таким образом, вы можете либо определить свойство animation-play-state позже (http://jsfiddle.net/fRzwS/373/):

#tech {
    -webkit-animation: moveSlideshow 10s linear infinite;
    -webkit-animation-play-state:paused;
}

, либо вы можете просто использовать (http://jsfiddle.net/fRzwS/374/):

-webkit-animation: moveSlideshow 10s linear infinite paused;

Вот еще один примеркоторый работает как на Chrome, так и на Firefox: http://jsfiddle.net/MaY5A/694/

...