Css3 animation continues to return to its original state

Question

A game with CSS 3 animations, but for some reason, all animations return to their original state after execution.

In this case, I want the image to remain on scale(1) after the animation, and my text is displayed after the img animation, but remains after.

 .expanding-spinning { -webkit-transform: scale(.4); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; animation-duration: 500ms; } .expanding-spinning { -webkit-animation: spin2 1.4s ease-in-out alternate; animation: spin2 1.4s ease-in-out alternate; -webkit-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes spin2 { 0% { -webkit-transform: rotate(0deg) scale(.4);} 100% { -webkit-transform: rotate(360deg) scale(1);} } @-keyframes spin2 { 0% { transform: rotate(0deg) scale(.4);} 100% { transform: rotate(360deg) scale(1);} } @-webkit-keyframes fadeInFromNone { 0% { display:none; opacity: 0; } 100% { display: block; opacity: 1; } } .slogan { display: block; opacity: 1; -webkit-animation-duration: 2s; -webkit-animation-name: fadeInFromNone; -webkit-animation-delay: 3.5s; } 

Script code

Answer 1

You need to add the rule -webkit-animation-fill-mode: forwards; to your animations.

Also regarding text animation: Animate the visibility property instead of the display property

Fiddle

 .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; /* <--- */ } 

See this article for a nice explanation of all the animation features.

Fill mode. If it is set forward, the last keyframe remains at the end of the animation,

(from the link above)