css - 如何为元素的“变换：旋转”设置动画？

Question

下面的 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;
}

Answer 1

解决了。我有这个测试用例：

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

仅适用于添加以下内容：

.test { display: inline-block; }