CSS动画重复而不​​重新加载

Question

我创建了一个带有背景图像的div并应用了css动画（从左到右过渡）。 （附上截图）enter image description here我的问题是：如何在不重新加载页面的情况下再次播放？这是我的HTML：

<div class="cityscape">
  <div class="chef"></div>
</div>

这是我的css：

.chef {
    background-image: url("../img/chef.png");
    background-position: left bottom;
    background-size: auto 100%;
    position: absolute;
    background-repeat: no-repeat;
    width:700px;
    height:60px;
    margin-top:90px;
}

/ 动画厨师 /

@-webkit-keyframes move
    {
        from {
        left: 0;
    }

    to {
        left: 50%;
    }
}

@keyframes move
{
    from {
        left: 0;
    }
        to {
        left: 50%;
    }

      to {
        left: 100%;
    }

}


.chef {
    padding-right: 20px;
    left: 100%;
    position: absolute;
    -webkit-animation: move 40s;
    animation: move 40s;
}

.chef img {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px;
    transition-duration: 10s;
    }

Answer 1

只需将infinite添加到move动画的结尾。

<强> CSS

-webkit-animation: move 40s infinite;
animation: move 40s infinite;

＆＃13;

＆＃13;

.chef {
    background-image: url("../img/chef.png");
    background-position: left bottom;
    background-size: auto 100%;
    position: absolute;
    background-repeat: no-repeat;
    width:700px;
    height:60px;
    margin-top:90px;
}

@-webkit-keyframes move
    {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

@keyframes move
{
    from {
        left: 0;
    }

    to {
        left: 100%;
    }

}


.chef {
    padding-right: 20px;
    left: 100%;
    position: absolute;
    -webkit-animation: move 40s infinite;
    animation: move 4s infinite;
}

.chef img {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px;
    transition-duration: 10s;
    }

＆＃13;

<div class="cityscape">
  <div class="chef">hello</div>
</div>

＆＃13;

＆＃13;

＆＃13;

P.S。我还注意到，对于您的动画，您正在调用to两次，试图让它停在50%然后继续。这不是这样做的方法。如果你想要实现这一点，请改用百分比，如下所示：

@keyframes example {
    0%   {left: 0;}
    50%  {left: 50%}
    100% {left: 100%}
}