动画后的CSS代码不起作用

Question

我有一个问题，为什么我的CSS代码在动画后放置时不起作用。

以下是示例：

img {
    max-width: 50px;
}

@keyframes slidedown {
  from {
    margin-top: 100%;
    height: 300%;

  to {
    margin-top: 0%;
    height: 300%;
  }
}

img {
    max-width: 50px;
}

如果我把它放在动画之前，

img将是50像素，并且在动画之后放置时会填满整个页面。

这只是一个例子（动画是关于文本的）。但是我无法理解为什么我的CSS代码在动画之后没有工作。

Answer 1

您在}声明之后和from声明之前错过了结束to。尝试：

@keyframes slidedown {
  from {
    margin-top: 100%;
    height: 300%;
  }
  to {
    margin-top: 0%;
    height: 300%;
  }
}