Question

如果#box中不存在“ position：absolute”，为什么动画不起作用？

当“ position：absolute”在#box中删除时，我尝试了此代码，但它没有用。

<style>
    #box{
        **position:absolute;**
        width:200px;
        height:200px;
        background-color:red;
        animation:animate 2s none infinite alternate;
    }

    @keyframes animate{
        from{
            left:0;
        }
        50%{
            left:500px;
        }
        to{
            left:500px;
        }

    }
</style>

Answer 1

您不应该为左/右/上/下设置动画，最好使用transforms。变换允许元素在DOM上保留空间的情况下可视地移动，从而使动画更安全/更流畅。

试试看

Object.create({})

工作演示jsfiddle

我不知道为什么这个动画有效

1 个答案: