在 CSS 3 中，为什么使用 `@keyframes` 在这里不起作用？

Question

代码如下：

div.circle {
  height: 134px;
  width: 134px;
  background-color: #000;
  margin: 50vh auto 0;
  transform: translateY(-50%);
  border-radius: 50%;
  animation-name: example;
  animation-duration: 2s;
}
@keyframes example {
  from : {
    height: 134px;
    width: 134px;
  }
  to : {
    height: 200px;
    width: 200px;
  }
}

<div class="circle"></div>

我想在 CSS 中使用 @keyframes 使圆变大。但是，我发现 Chrome 中根本没有动画，即使我为该元素添加了 animation-name 和 animation-duration。（此外，添加浏览器前缀并不能解决这个问题。）

有没有人对此有任何想法？谢谢！

Answer 1

您的 css 代码应该是这样的：

div.circle {
    height: 134px;
    width: 134px;
    background-color: #000;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border-radius: 50%;
    //animation-name: example;
    //animation-duration: 2s;
    animation: example 2s infinite;
    -webkit-animation: example 2s infinite;
}
@keyframes example {
    from {
        height: 134px;
        width: 134px;
    }
    to {
        height: 200px;
        width: 200px;
    }
}
@-webkit-keyframes example {
    from {
        height: 134px;
        width: 134px;
    }
    to {
        height: 200px;
        width: 200px;
    }
}

Here is the JSFiddle demo

您的代码有两处错误。

您需要为 chrome 浏览器使用 @-webkit-keyframes。第二件事是您需要从 from : { 和 to : { 中删除 : ，因为这是一个语法错误。

在 CSS 3 中，为什么使用 `@keyframes` 在这里不起作用？

In CSS 3, why using `@keyframes` doesn't work here?

html

css

animation

keyframe