Question

我已经使用CSS几年了但是没有做很多动画，所以我试着教自己如何做到这一点，到目前为止没有取得多大成功。我设置了关键帧，然后在一个对象上调用动画，但是当我加载页面时什么也没发生;这是代码：

HTML：

  <head>
  <meta http-equiv="Content-Type" content="text/html;   charset=utf-8"/>
  <link rel="stylesheet" href="style.css">
  <title>CSS Animation Test</title>
  </head>
  <body>
    <div class="circle red"></div>
  </body>

CSS：

@keyframes up-right {
  0% {
    scale: 1;
    opacity: .25
  }
  50% {
    scale: 1.5;
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: .25;
  }
}

.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  opacity: .25;
}

.red {
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: up-right 1s infinite;
  -moz-animation: up-right 1s infinite;
  -o-animation: up-right 1s infinite;
  animation: up-right 1s infinite;
}

所以我必须遗漏一些东西，因为当我加载页面时，红色圆圈div完全没有任何内容，对此的任何帮助都将非常感激。另外，在旁注中，如果任何人都可以发布语法示例以使对象实际移动（更改位置），将会很有帮助。

谢谢！

Answer 1

除scale外，一切看起来都不错，而且您还需要提供特定于浏览器的css：即

-webkit-keyframes,-moz-keyframes,-o-keyframes等

CSS：

@-webkit-keyframes up-right {
0% {
    transform:scale(1);
    -webkit-transform:scale(1);

    opacity: .25
}
50% {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    opacity: 1;
}
100% {
    transform:scale(1);
    -webkit-transform:scale(1);
    opacity: .25;
}
}

@keyframes up-right {
0% {
    transform:scale(1);
    -webkit-transform:scale(1);

    opacity: .25
}
50% {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    opacity: 1;
}
100% {
    transform:scale(1);
    -webkit-transform:scale(1);
    opacity: .25;
}
}

演示：http://jsfiddle.net/GCu2D/195/

Answer 2

一切都是正确的，但你的scale属性完全错了..这是怎么写的

 transform: scale(1.5);

http://jsfiddle.net/vlrprbttst/XAS5E/

和是keyframes需要像@-webkit-keyframes up-right {

这样的供应商前缀

Answer 3

您需要注意关键帧也使用供应商前缀。

@keyframes up-right {

和

@-webkit-keyframes up-right {

请参阅：

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Browser_Compatibility

试图学习CSS动画，无法让它发挥作用

3 个答案: