html - 动画 CSS 标签不适用于 ID，0% 到 100%

Question

简单的问题，但我似乎无法让我的关键帧 img 动画在我的网站上运行。 img 的 HTML 格式如下:

<img src="img address" id="logo" class="center">

我的类(class)中心 CSS:

.center{display:block; margin-left:auto; margin-right:auto;}

@keyframe 的 CSS:

@keyframes logo_invert{ 0% {filter:invert(0%)} 50% {filter:invert(100%)} 100% {filter:invert(0%)} }

最后是 Logo 的 CSS:

#logo{width:500px; length:500px; animation-name:logo_invert; animation-duration:6s; animation-iteration-count:infinite;}

我对这里出了什么问题感到非常困惑，因为我在其他地方的测试工作正常。我正在为网站使用当前版本的 chrome，如果这可能会改变什么的话。

Answer 1

第一个猜测是删除你的 css 中的 length 东西，因为它不是一个有效的属性，除此之外工作正常......干杯。

.center{
  display:block;
  margin-left:auto;
  margin-right:auto
}

#logo {
  width:500px;
  /* length:500px; - This isn't a real thing, so commenting out. */
  animation-name: logo_invert; 
  animation-duration: 6s; 
  animation-iteration-count: infinite;
}

img { 
  height: 10rem;
  object-fit: contain;
}

@keyframes logo_invert { 
  50% { filter:invert(100%) }
}

<img src="/image/BVW9D.jpg" id="logo" class="center">