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

简短回答：You can't animate position.

不是通过关键帧应用position: fixed，而是尝试通过javascript添加类fixed或其他内容。

示例：https://jsfiddle.net/6Ldqhoce/

另外，您可以使用transform: translate移动元素，但不会修复。

Answer 2

您无法使用position更改CSS-animation，因为position 不 可动画的属性。

List of animatable properties

但是， this 小提琴可能会对您有所帮助。

Answer 3

我通过'Vangel Tzo'帮助找到答案：

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

@keyframes example {
    from {
        background-color: red;
    }
    to {
      background-color: yellow;
      transform: translate(50vw, 50vh);
     }
}

Answer 4

您无法使用css动画更改css位置值。

您可以使用jQuery

执行此操作

示例是悬停，您可以根据自己的选择进行操作。

Jquery

使用“Css”

$(".div_name").hover(function(){
    $(this).css("position", "static");
    }, function(){
    $(this).css("position", "fixed");
});

使用“Animate”

 $(".div_name").hover(function(){
        $(this).animate({"position":"static"}, 1000);
        }, function(){
        $(this).animate({"position":"fixed"}, 1000);
    });

如何用动画改变元素CSS位置

4 个答案: