html动画如何设置恢复原状态,如果暂停了动画的播放，元素的样式将回到最原始设置状态...

你的问题可以这样解决，

如果暂停了动画的播放，元素的样式将回到最原始设置状态

@keyframes move {

0%{

transform: translateY(90px);

background: orange;

}

15%{

transform: translate(90px,90px);

}

30%{

transform: translate(180px,90px);

}

45%{

transform: translate(90px,90px);

}

60%{

transform: translate(90px,0);

}

75%{

transform: translate(90px,90px);

}

90%{

transform: translate(90px,180px);

}

100%{

transform: translate(90px,90px);

background: green;

}

}

div {

width: 200px;

height: 200px;

border: 1px solid red;

margin: 20px auto;

}

span{

display: inline-block;

width: 20px;

height: 20px;

background: orange;

transform: translateY(90px);

animation-name: move;

animation-play-state:paused;

}

div:hover span {

animation-name: move;

animation-duration: 10s;

animation-timing-function: ease-in;

animation-delay: .2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

}