Блог

Если я использую свойство CSS для анимации css, и если я использую это свойство также для эффекта наведения курсора, в Google Chrome наведение курсора не будет работать.

Вот код анимации :

 @keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
 

Вот код наведения :

 .sImg:hover{
    opacity: 1 !important;
    @include scale(1.2);
}
 

Рабочая демонстрация (5 круглых изображений внизу должны масштабироваться при наведении курсора мыши.): http://secret-temple-3539.herokuapp.com /

Добавьте transform в контейнер div вместо img тега, как показано ниже, и он должен работать в соответствии с вашими ожиданиями.

 .sImgCont:hover {
    opacity: 1 !important;
    -webkit-transform: scale(1.2); /* for older versions, add other browser prefixes as you need */
    transform: scale(1.2);
}
 

В качестве альтернативы, вы можете создать a как block (используя display: block ) и добавить transform к нему. (Наименее предпочтительный вариант)

Добавьте transition также к div или a , чтобы сделать преобразование более плавным.

Я не думаю, что Chrome (webkit) поддерживает масштабирование неблочных элементов (РЕДАКТИРОВАТЬ: как упоминалось здесь ).

Редактировать 2: следовало бы упомянуть, что приведенный выше ответ является одним из возможных решений проблемы, о которой вы упомянули в комментариях.

Что касается вашего первоначального вопроса, проблема, похоже, связана со -webkit-animation-fill-mode свойством. Значение both , похоже, на самом деле вызывает проблему, когда оба animated fadeInUpBig класса и используются вместе. Как вы можете видеть в этой скрипке, когда значение изменяется backwards , оно работает нормально. ( forwards также не работает)

Редактировать 3: это еще одна более простая скрипка, которая может помочь вам понять. В этом случае вы увидите, что я применил два преобразования (одно с помощью начальной анимации и одно при наведении курсора), и вы обнаружите, что те, у которых режим заливки как forwards / both, не выполняют преобразование при наведении курсора, в то время как у того, у которого обратный курсор делает.

Единственное объяснение, которое у меня есть, заключается в том, что оба forwards и both div удерживают его конечное состояние, которое уже преобразовано, и, следовательно, другое поверх него не берется. Однако backwards режим восстанавливает div обратно в исходное положение до / без преобразования (которое было 0px) и, следовательно, может принимать преобразование, указанное при наведении.

Возможная причина в том, что в CSS для элемента одновременно может быть указано / присутствовать только одно свойство преобразования (попробуйте указать две разные -webkit-transform строки в одном классе и увидите, что вступит в силу только одна) и, следовательно, при попытке применить новое преобразование к элементу, который уже содержитпреобразованное состояние, оно не работает.

Примечание: Это не окончательный ответ, но я оставляю его здесь, потому что анализ может помочь кому-то в будущем.