尝试学习css动画，可以'；我不能让它工作_Css_Animation_Css Animations

尝试学习css动画，可以'；我不能让它工作

css animation

尝试学习css动画，可以'；我不能让它工作,css,animation,css-animations,Css,Animation,Css Animations,我已经用CSS工作了几年，但是还没有对动画做太多的工作，所以我试图教自己如何去做，到目前为止还没有多少成功。我设置了关键帧，然后调用对象上的动画，但当我加载页面时，什么都没有发生；代码如下： HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="style.css"> <

我已经用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>

因此，我必须错过一些东西，因为红色圆圈div在我加载页面时完全不做任何事情，对此的任何帮助都将不胜感激。另外，在旁注中，如果任何人都可以发布一个使对象实际移动（更改位置）的语法示例，这将非常有用

谢谢

一切都是正确的，但您的

scale

属性完全错误。。下面是如何写的

 transform: scale(1.5);

是的，

keyframes

需要像这样的供应商前缀

@-webkit keyframes向上{

一切都是正确的，但是您的

scale

属性完全错误。下面是如何编写它的

 transform: scale(1.5);

是的，

关键帧

需要供应商前缀，如so

@-webkit右上角的关键帧{

一切看起来都很好，除了

缩放

，您还需要提供特定于浏览器的css：即

-webkit关键帧，-moz关键帧，-o关键帧

等

CSS:

演示：

一切看起来都不错，除了

scale

之外，您还需要提供特定于浏览器的css: 即

-webkit关键帧，-moz关键帧，-o关键帧

等

CSS:

演示：

您需要知道关键帧也使用供应商前缀

@右上关键帧{

及

@-webkit右上关键帧{

见：

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

@右上关键帧{

及

@-webkit右上关键帧{

见：

transform还需要一个

-webkit-

前缀transform还需要一个

-webkit-

前缀

@-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;
}
}