Question

我无法让这个动画为我的生活而工作。它应该从一侧到另一侧移动方块并改变背景颜色。其他人似乎正在使用完全相同的代码并获得所需的结果。我尝试了不同的支持浏览器甚至不同的计算机，以确保它不是计算机。任何帮助将不胜感激。

HTML：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3 Animation</title>
    <link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
    <h1>CSS3 Animation</h1>
    <div class="square"></div>
</body>
</html>

CSS：

.square {
    border: 3px solid black;
    height: 50px;
    width: 50px;
    clear: both;

    -webkit-animation-name: keyframeMoveDiv;
    animation-name: keyframeMoveDiv;

    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-iteration-count: infinite;

    -webkit-transition-duration: 5s;
    transition-duration: 5s;

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;

    -webkit-animation-direction: alternate;
    animation-direction: alternate;

    -webkit-animation-delay: 2s;
    animation-delay: 2s;

    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; margin-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}

@-webkit-keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; marign-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}

Answer 1

我在我的css中使用了这个：

-webkit-transition-duration: 5s;
transition-duration: 5s;

当它需要是动画持续时间时。所以：

-webkit-animation-duration: 5s;
animation-duration: 5s;

Answer 2

<强> Demo

    .square {
    border: 3px solid black;
    height: 50px;
    width: 50px;
    clear: both;


    -webkit-animation: keyframeMoveDiv 5s; /* Chrome, Safari, Opera */
    animation: keyframeMoveDiv 5s;


/*    -webkit-animation-name: keyframeMoveDiv;
    animation-name: keyframeMoveDiv;*/

    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-iteration-count: infinite;

/*    -webkit-transition-duration: 5s;
    transition-duration: 5s;*/

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;

    -webkit-animation-direction: alternate;
    animation-direction: alternate;

    -webkit-animation-delay: 2s;
    animation-delay: 2s;

    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; margin-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}

@-webkit-keyframes keyframeMoveDiv {
    0%   {background:#FF0000; margin-left: 0;}
    25%  {background:#00FF00; margin-left: 200px;}
    50%  {background:#0000FF; margin-left: 500px;}
    75%  {background:#FFFF00; marign-left: 700px;}
    100% {background:#00FFFF; margin-left: 0;}
}

CSS3动画未按预期工作

2 个答案: