CSS анимация применена к корневому элементу, который ведет себя странно - PullRequest
Новая
       6

CSS анимация применена к корневому элементу, который ведет себя странно

0 голосов
/ 08 января 2019

Я пытаюсь применить анимацию CSS к корневому элементу страницы, и она ведет себя странно. Вы можете увидеть это здесь: http://dinakelberman.com/bucket/circle-test.html

html {
display:block;
transition-duration:1.5s;
background:#E3DCB1;
background-image:url(http://vignette.wikia.nocookie.net/leapfrog/images/b/be/Yellow_Circle.png/revision/latest?cb=20180115233859);
background-size:100%;
animation:rotate 0.5s linear infinite;
}

@keyframes rotate {
	0% {transform:rotateY(0deg) rotateX(0deg);}
	100% {transform:rotateY(360deg) rotateX(360deg);}
}
  • в Chrome & Opera анимация прогрессирует только при движении мыши
  • в сафари он анимируется как ожидалось
  • в Firefox он вообще не анимируется

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

Я делаю некоторую экспериментальную работу, где я пытаюсь иметь дело исключительно с корневым элементом. Мне не очень нравится поведение, но в идеале я хотел бы, чтобы результаты были одинаковыми во всех браузерах, поэтому мне интересно, как они справляются с этим по-разному.

...