Как анимировать элемент "transform: rotate"? - PullRequest
Новая
       6

Как анимировать элемент "transform: rotate"?

1 голос
/ 21 июня 2011

Следующий CSS должен теоретически работать в новейшей сборке Chrome ... как ни странно, прозрачность анимирована правильно, но transform: rotate игнорируется. Разве это не может быть передано? 

@-webkit-keyframes offblink {
  0% {
    -webkit-transform: rotate(45deg);
    opacity: 0;
  }

  50% {
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
}
.test {
  -webkit-animation-name: offblink;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

1 Ответ

2 голосов
/ 21 июня 2011

решаемая. У меня был этот тест-кейс: 

<div>anim only this: <span class="test">+</span></div>

Работал только с добавлением этого: 

.test { display: inline-block; }
...