如何动画元素的“变换:旋转”?

时间:2011-06-21 02:42:48

标签: css3 transform keyframe

以下CSS理论上应该适用于最新的Chrome版本......奇怪的是,不透明度是正确动画但转换:旋转被忽略。这不能过渡吗?

@-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 个答案:

答案 0 :(得分:2)

解决。我有这个测试用例:

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

只有添加这个:

.test { display: inline-block; }