css3 animation keep reverting to original state

问题:

Playing around with CSS 3 animations but for some reasons, all animations return to their original state after execution.

In this case I'd like the image to remain at scale(1) after animation and my text to oly appear after img animation but stay afterward.

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

Fiddle code

回答1:

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

Also, regarding the text animation: Animate the visibility property instead of 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 properties

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

(from above link)