#css #css-animations
Вопрос:
.object-wraps{width: 100px; height: 100px; background: gray;} .object-wraps:hover { -webkit-animation-name: object-skew; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -moz-animation-name: object-skew; -moz-animation-timing-function: linear; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: object-skew; -o-animation-timing-function: linear; -o-animation-duration: 2s; -o-animation-iteration-count: 1; animation-name: object-skew; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: 1; } @-webkit-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-moz-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-o-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } lt;pgt;This doesn't work in any browserlt;/pgt; lt;div class="object-wraps"gt;lt;/divgt; .object-wraps {width: 100px; height: 100px; background: green;} .object-wraps:hover { -webkit-animation-name: object-skew; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -moz-animation-name: object-skew; -moz-animation-timing-function: linear; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: object-skew; -o-animation-timing-function: linear; -o-animation-duration: 2s; -o-animation-iteration-count: 1; animation-name: object-skew; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: 1; } @-webkit-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-moz-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-o-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } lt;pgt;This only works on Firefoxlt;/pgt; lt;div class="object-wraps"gt;lt;/divgt; I added the browser suppor until I realised that only firefox fully supports this. However, this code has stopped running on Firefox as well. Why is that?
This works:
.object-wraps:hover { animation-name: object-skew; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: 1; } @keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg;} 50% {rotate: 1 1 0 15deg;} } Это не значит:
.object-wraps:hover { -webkit-animation-name: object-skew; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -moz-animation-name: object-skew; -moz-animation-timing-function: linear; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: object-skew; -o-animation-timing-function: linear; -o-animation-duration: 2s; -o-animation-iteration-count: 1; animation-name: object-skew; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: 1; } @-webkit-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-moz-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @-o-keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } @keyframes object-skew { 0% {rotate: 0 0 0 0deg;} 45% {rotate: 1 1 0 15deg; } 50% {rotate: 1 1 0 15deg;} } Я не ожидаю, что он будет играть в chrome и т. Д. Но почему он больше не играет в firefox?
ПРАВКА: Замена всех {поворот: 1 1 0 15deg;} для лучшей поддержки {преобразование: rotate3d(1, 1, 0, 15deg);} запускает обе версии.
Комментарии:
1. Работает для меня без проблем в Firefox Windows 10. Возможно, вы могли бы превратить свой код в рабочий фрагмент, который показывает проблему в вашем Firefox. На какой операционной системе вы работаете?
2. Я на Windows 10. Замена всех {поворот: 1 1 0 15deg;} для лучшей поддержки {преобразование: rotate3d(1, 1, 0, 15deg);} позволяет работать обе версии.
Ответ №1:
Хорошо, после создания фрагментов, которые мне предложил Хаворт, кажется, что оба варианта работают в Firefox и ни в одном другом браузере, как ожидалось. Поэтому я предполагаю, что проблема, должно быть, заключалась в чем-то другом в коде моего сайта. Все еще странно, что это работало, пока я не добавил исправления браузера.
Я добавляю третий вариант, который должен работать во всех современных браузерах.
.object-wraps {width: 100px; height: 100px; background: purple;} .object-wraps:hover { -webkit-animation-name: object-skew; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -moz-animation-name: object-skew; -moz-animation-timing-function: linear; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: object-skew; -o-animation-timing-function: linear; -o-animation-duration: 2s; -o-animation-iteration-count: 1; animation-name: object-skew; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: 1; } @-webkit-keyframes object-skew { 0% {transform: rotate3d(0, 0, 0, 15deg);} 45% {transform: rotate3d(1, 1, 0, 15deg);} 50% {transform: rotate3d(1, 1, 0, 15deg);} } @-moz-keyframes object-skew { 0% {transform: rotate3d(0, 0, 0, 15deg);} 45% {transform: rotate3d(1, 1, 0, 15deg);} 50% {transform: rotate3d(1, 1, 0, 15deg);} } @-o-keyframes object-skew { 0% {transform: rotate3d(0, 0, 0, 15deg);} 45% {transform: rotate3d(1, 1, 0, 15deg);} 50% {transform: rotate3d(1, 1, 0, 15deg);} } @keyframes object-skew { 0% {transform: rotate3d(0, 0, 0, 15deg);} 45% {transform: rotate3d(1, 1, 0, 15deg);} 50% {transform: rotate3d(1, 1, 0, 15deg);} } lt;pgt;This should work everywherelt;/pgt; lt;div class="object-wraps"gt;lt;/divgt;