html动画如何设置恢复原状态,css3动画不断恢复到原始状态

您需要添加规则-webkit-animation-fill-mode：forwards;到你的动画.

此外,关于文本动画：为可见性属性设置动画而不是显示属性

.expanding-spinning {

-webkit-animation: spin2 1.4s ease-in-out;

-moz-animation: spin2 1.4s linear normal;

-o-animation: spin2 1.4s linear;

-ms-animation: spin2 1.4s linear;

animation: spin2 1.4s ease-in-out alternate;

-webkit-animation-delay: 2s;

animation-delay: 2s;

-webkit-animation-fill-mode: forwards; /*

}

@-webkit-keyframes fadeInFromNone {

0% {

visibility:hidden;

opacity: 0;

}

100% {

visibility: visible;

opacity: 1;

}

}

.slogan {

visibility:hidden;

opacity: 1;

-webkit-animation-duration: 2s;

-webkit-animation-name: fadeInFromNone;

-webkit-animation-delay: 3.4s;

-webkit-animation-fill-mode: forwards; /*

}

有关所有动画属性的详细说明,请参阅this article

The fill mode. If set to forwards,the last keyframe remains at the

end of the animation,

(来自上面的链接)