CSS动画和变换

Question

我不确定为什么我的动画中的transform: translateX没有起作用。 我想要移动一个div 100px，然后回到起始位置。

这是一个示例代码：http://jsfiddle.net/tWnRb/

以下是我的HTML代码：

<div></div>

这是我的CSS代码：

div {
  width: 200px;
  height: 200px;
  background: coral;
  -webkit-animation: squareToCircle 2s 1s infinite alternate;

}

-webkit-keyframes squareToCircle {
  0% {
    border-radius: 0 0 0 0;
    background: coral;
    -webkit-transform: translateX(0px);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    -webkit-transform: translateX(50px);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: hotpink;
    -webkit-transform: translateX(100px);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: lightcoral;
    -webkit-transform: translateX(50px);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    background: darksalmon;
    -webkit-transform: translateX(0px);
  }
}

- Mdd

---

你忘了在-keyframes之前加上@符号。http://jsfiddle.net/viphalongpro/tWnRb/6/ - King King

Answer 1

关键帧需要用 @ 前缀。

演示

@-webkit-keyframes NAME-YOUR-ANIMATION { }
@-moz-keyframes NAME-YOUR-ANIMATION { }
@-o-keyframes NAME-YOUR-ANIMATION { }
@keyframes NAME-YOUR-ANIMATION { }

您还应该适配其他浏览器以及Webkit。

- DreamTeK

---

谢谢！我没有意识到它需要@。 - Mdd

再次感谢！我会添加供应商前缀，只是为了使示例代码更容易调试，我将它们省略了 :) - Mdd

Answer 2

http://jsfiddle.net/tWnRb/5/

-webkit-keyframes squareToCircle {

to

@-webkit-keyframes squareToCircle {

- Dave Briand

---

谢谢！我没有意识到需要使用 @ 符号！当我尝试学习新东西时，总是会被小的语法错误所困扰。再次感谢！ - Mdd

跟随Obsidion的答案 - 他的更完整。 - Dave Briand