CSS-анимация с различными эффектами на: hover и: active?

EDIT Demo здесь: http://3.cnxical.appspot.com CSS-анимация с различными эффектами на: hover и: active?

В text-shadow изменения свойств при наведении курсора мыши, и с animation-fill-mode установить forwards состояние сохраняется.

Анимация для активного состояния не работает, и ничего не происходит при нажатии на заголовок.

Ожидаемое поведение должно исчезнуть, поскольку свойство text-shadow было установлено (и оба они были проверены) none или 0 0 1px transparent. Установка text-shadow для: active была также опробована без анимации, и это не сработало.

Как можно добиться правильного поведения?

Код:

  #title { 
       position:absolute; 
       cursor:pointer; 
       text-align:center; 
       top:15%; 
       left:50%; 
       -webkit-transform:translate(-50%,-50%); 
       color:transparent; 
       text-shadow:0 0 10px lime; 
       font-size:5vmin; 
       font-weight:bold; 
       font-family:"Courier New",Courier,monospace; 
       -webkit-animation: push_title_focus 0.3s; 
      } 
      #title:active { 
       -webkit-user-select:none; 
       -webkit-animation: vanish_title 0.3s; 
      } 
      #title:hover { 
       -webkit-animation: pull_title_focus 0.3s; 
       -webkit-animation-fill-mode: forwards; 
      } 
      @-webkit-keyframes pull_title_focus { 
       from { text-shadow: 0 0 10px lime; } 
       to { text-shadow: 0 0 1px lime; } 
      } 
      @-webkit-keyframes push_title_focus { 
       from { text-shadow: 0 0 1px lime; } 
       to { text-shadow: 0 0 10px lime; } 
      } 
      @-webkit-keyframes vanish_title { 
       from { text-shadow: 0 0 1px lime; } 
       to { text-shadow: none !important; } 
      }

источник

2013-12-19 Cris

Не должно быть #title: фокус при нажатии на заголовок? –

Я всегда думал, что фокус предназначен для фокуса вкладки, только побочный эффект при нажатии. Активен для щелчка. Как вы думаете? – Cris

Я думаю, что я ошибаюсь - просто попробовал это в скрипке, и это не сработало. Однако теперь у вас есть правильный ответ: o) –

При нажатии на кнопку мыши, чтобы активировать ссылку, мышь все еще указывает на него, так что он все еще колебались.

#title:hover и #title:active не менее конкретно, и правило наведения определено последним.

Любые правила со свойствами, заданными в обоих наборах правил, будут переопределены правилом :hover (включая -webkit-animation).

Измените порядок своих наборов правил, чтобы появилось правило :hoverдо:active правило.

источник

2013-12-19 15:18:06 Quentin

Удивительный! Он работает, спасибо. Прием. Тем не менее, неправильно ли говорить, что hover - это просто событие, которое срабатывает, запуская анимацию, поэтому для CSS элемент еще не виден. Состояние сохраняется после того, как наведение запускает анимацию только потому, что режим заполнения - вперед. Как вы думаете? – Cris

№ «зависший» означает «мышь указывает на него». – Quentin

ОК и для анимации WebKit без режима заполнения вперед состояние анимации не сохраняется, предполагая, что наведите курсор мыши на одно событие. Как вы думаете? – Cris

CSS-анимация с различными эффектами на: hover и: active?

ответ

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