webkit анимация воспроизведения состояния не обнаружена в то время как transformX

Я пытаюсь приостановить отображение анимации (которая является преобразованием CSS) на зависании, но зависание не определено равномерно по диапазону преобразования (я заметил, что он правильно обнаружен в начальный диапазон и после того, как заканчивается преобразование) Это код (я упростил до минимума для размещения):webkit анимация воспроизведения состояния не обнаружена в то время как transformX

<html> 
 
     \t <head> 
 
     \t \t <style> 
 
     \t \t \t .member{ 
 
     \t \t \t  height:50px; 
 
     \t \t \t  width:50px; 
 
     \t \t \t  margin:30px; 
 
     \t \t \t  border-radius:50%; 
 
     \t \t \t  border:1px solid #AAAAAA; 
 
     \t \t \t  background-color:black; 
 
     \t \t \t  transition:all 0.3s ease; 
 
     \t \t \t  -moz-animation-name: dropHeader; 
 
     \t \t \t  -moz-animation-iteration-count: 1; 
 
     \t \t \t  -moz-animation-timing-function: ease-in; 
 
     \t \t \t  -moz-animation-duration: 6s; 
 
     \t \t \t  
 
     
 
    \t \t \t  -webkit-animation-name: dropHeader; 
 
    \t \t \t  -webkit-animation-iteration-count: 1; 
 
    \t \t \t  -webkit-animation-timing-function: ease-in; 
 
    \t \t \t  -webkit-animation-duration: 6s; 
 
    
 
    \t \t \t  animation-name: dropHeader; 
 
    \t \t \t  animation-iteration-count: 1; 
 
    \t \t \t  animation-timing-function: ease-in; 
 
    \t \t \t  animation-duration: 6s; 
 
    \t \t \t } 
 
    \t \t \t @-moz-keyframes dropHeader { 
 
    \t \t \t  0% { 
 
    \t \t \t   -moz-transform: translateX(200px); 
 
    \t \t \t  } 
 
    \t \t \t  100% { 
 
    \t \t \t   -moz-transform: translateY(0); 
 
    \t \t \t  } 
 
    \t \t \t } 
 
    \t \t \t @-webkit-keyframes dropHeader { 
 
    \t \t \t  0% { 
 
    \t \t \t   -webkit-transform: translateX(200px); 
 
    \t \t \t  } 
 
    \t \t \t  100% { 
 
    \t \t \t   -webkit-transform: translateX(0); 
 
    \t \t \t  } 
 
    \t \t \t } 
 
    \t \t \t @keyframes dropHeader { 
 
    \t \t \t  0% { 
 
    \t \t \t   transform: translateX(200px); 
 
    \t \t \t  } 
 
    \t \t \t  100% { 
 
    \t \t \t   transform: translateX(0); 
 
    \t \t \t  } 
 
    \t \t \t } 
 
    
 
    \t \t \t .member:hover{ 
 
    \t \t \t  border:3px solid #ffffff; \t 
 
    \t \t \t \t box-shadow: 0px 0px 0px 3px #7ec0ee; 
 
    \t \t \t  -webkit-animation-play-state: paused; 
 
    \t \t \t \t 
 
    \t \t \t } 
 
    \t \t </style> 
 
    \t </head> 
 
    \t <body> 
 
    \t \t <div class="member"> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

источник

2015-06-03 Mohit Chawla

Хорошо, вот это вещь, я не мог выяснить, точная причина, но e - все, что я пробовал и не удался, а затем преуспел (по порядку):
1. Удаление -webkit
2. Использование jquery mouseover и mouseout, интегрированное с css animationstates «running» и pause.
3. Затем я заметил, что после одного наведения, если я нажму несколько раз в другом месте на веб-сайте, а затем наведите курсор, это сработало! Который дал мне намек на направление введения нескольких таких div, и теперь он отлично работает.

источник

2015-06-03 10:15:38

Я не уверен, что понимаю, что вы подразумеваете под «введение нескольких таких div». Не могли бы вы привести нам пример? – Tod

webkit анимация воспроизведения состояния не обнаружена в то время как transformX

ответ

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