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

您的代码有两个问题。

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

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

1 个答案: