@keyframes如何获取div信息实现动画？方块生成逻辑疑问

首先看你提供的CSS代码：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

你的理解搞反了，不是@keyframes example从div元素里获取动画信息，而是div元素主动引用了这个名为example的动画规则。

具体逻辑是这样的：

• @keyframes example是提前定义好的一套独立动画规则，它只负责描述动画的变化过程——从红色背景过渡到黄色背景，本身不会主动作用在任何元素上。
• div元素的样式里通过animation-name: example指定了要使用的动画名称，再配合animation-duration: 4s设置动画时长，浏览器就会把这个预定义的example动画规则应用到这个div上，让它按照规则完成变色动画。
• 方块的尺寸、初始样式是div自身的CSS属性定义的，和@keyframes无关，@keyframes只负责控制动画过程中的样式变化。

简单总结：先有动画规则的定义，再由元素指定使用哪个规则，是元素去“调用”动画，不是动画去“获取”元素信息。

内容的提问来源于stack exchange，提问作者ᴘᴏʟʏɢᴏɴ ᴇssᴇɴᴄᴇ