html - 如何使用动画更改元素 CSS 位置

Question

我想将 HTML 元素的位置从静态更改为固定在浏览器窗口的顶部 50% 和左侧 50%，但代码只会导致背景颜色发生变化!

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: static;
    top: auto;
    left: auto;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    from {
        background-color: red;
        position: static;
        top: auto;
        left: auto;
    }
    to {
      background-color: yellow;
      position: fixed;
      top: 50%;
      left: 50%;
     }
}

Answer 1

简短回答:您不能为位置设置动画。

不要通过关键帧应用 position: fixed 尝试通过 javascript 添加类 fixed 或其他东西。

一个例子:https://jsfiddle.net/6Ldqhoce/

或者，您可以使用 transform:translate 移动元素，但它不会固定。