css怎么让动画下过一直重复,CSS动画重复无需重新加载

我创建了一个带有背景图片的div，并将css动画应用到它(从左到右过渡)。 (附截图)enter image description here我的问题是：如何在无需重新加载页面的情况下再次播放它？这里是我的html：CSS动画重复无需重新加载

这里是我的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;

}

2016-08-12

Liz H.