Question

我正在尝试制作一个简单的动画，其中段落标记循环div。目前，我根本无法播放动画。经过一番观察后，我在SO上看到了其他一些问题，其中解决方案是添加供应商前缀。我在Chrome上，所以我添加了这个前缀。那不行。我看到另一个我需要将供应商前缀添加到animation属性的地方，所以我试过了。那也没有用。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Animations</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <main>
        <div class="box">
            <p class="animated">Hello</p>
        </div>
    </main>
</body>
</html>

我的css在css / main.css中：

.box {
    width: 500px;
    height: 500px;
    background-color: #ddd;
}

@keyframes around {
    0% { left: 0;top: 0; }
    25% { left: 500px; top: 0; }
    50% { left: 500px; top: 500px; }
    75% { left: 0; top: 500px; }
    100% { left: 0; top: 0;}
}

@-webkit-keyframes around {
    0% { left: 0;top: 0; }
    25% { left: 500px; top: 0; }
    50% { left: 500px; top: 500px; }
    75% { left: 0; top: 500px; }
    100% { left: 0; top: 0;}
}

p {
    display: inline-block;
    background-color: red;
    color: white;
    padding: 10px;
    margin: 0;
}

.animated {
    animation: around 4s ease-out infinite;
    -webkit-animation: around 4s linear infinite;
}

我在这里有一个codepen：http://codepen.io/khall47/pen/pNogKz

Answer 1

当您更改元素上的left / top属性值时，它需要有一个位置，否则没有任何反应，所以..

..提供.animated规则position: relative;，它会正常工作。

更新了codepen：http://codepen.io/anon/pen/gLOrwy

旁注，总是在CSS规则中的非前缀之前加上前缀属性

Answer 2

只需添加到您的段落中即可。这是因为它没有在相对中声明它不会移动。（不在Firefox上）

position: relative;

Answer 3

除了其他答案之外，如果您希望所有浏览器都使用相同的animation-timing-function，那么您应该为.animated CSS块中的所有内容提供相同的内容。

他们都应该是：

.animated {
    animation: around 4s linear infinite;
    -webkit-animation: around 4s linear infinite;
}

或

.animated {
    animation: around 4s ease-out infinite;
    -webkit-animation: around 4s ease-out infinite;
}

在Chrome上使用关键帧的css动画不会播放

3 个答案: