html - 通过 css3 更改带有动画的 html 元素的两个属性

Question

我希望 top 和 box-shadow 属性与动画一起执行。我编写了这段代码，但只有 box-shadow 与动画一起运行。我希望我的动画执行，例如 this .如何解决这个问题？

    .popup {
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
    }

    .popup:hover {
            top: -10px;
            -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
            -ms-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
        }

Answer 1

你能给我们'top'的初始值吗？

如果你使用像 boostrap、semantic-ui 这样的框架，添加(!重要)

顶部:-10px 重要；