Question

我正在制作动画，我想知道@keyframe标识符的规则是什么。

例如，我正在执行以下操作，但没有用。

代码：

  #banner {
  width: 468px;
  height: 60px;
  background-color: red;
  color: white;
  text-align: center;
  padding-top: 30px;
  font-weight: bold;
  font-size: 2em;
  animation-name: #banner;
  animation-duration: 4s;
}
@keyframes #banner {
  from: {background-color: red;}
  to: {background-color: green;}
}


<div id="banner">Just a banner</div>

Answer 1

@keyframes规则指定动画代码。

通过从一组CSS样式逐渐更改为另一组CSS样式来创建动画。

在动画过程中，您可以多次更改CSS样式集。

以百分比或使用关键字“ from”和“ to”（分别与0％和100％相同）指定样式更改的发生时间。 0％是动画的开始，100％是动画完成时。

提示：为了获得最佳的浏览器支持，您应该始终定义0％和100％选择器。

注意：关键帧会忽略！important规则

更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

CSS3中的@keyframes标识符规则是什么？

1 个答案: