animation stop at end using prefixes

by greatCar

HTML

<img class="expanding-spinning" src="http://viewsfromthewhiteboard.edublogs.org/files/2011/05/ball-pjk6ql.jpeg" width="50" height="50" />
<p class="slogan">text should appear after img animation and remain</p>

CSS

.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;
  -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 spin2 {
  0% { -webkit-transform: rotate(0deg) scale(.4);}
  100% { -webkit-transform: rotate(360deg) scale(1);}
}
@-moz-keyframes spin2 {
  0% { -moz-transform: rotate(0deg) scale(.4);}
  100% { -moz-transform: rotate(360deg) scale(1);}
}
@-o-keyframes spin2 {
  0% { -o-transform: rotate(0deg) scale(.4);}
  100% { -o-transform: rotate(360deg) scale(1);}
}
@-ms-keyframes spin2 {
  0% { -ms-transform: rotate(0deg) scale(.4);}
  100% { -ms-transform: rotate(360deg) scale(1);}
}
@-keyframes spin2 {
  0% { transform: rotate(0deg) scale(.4);}
  100% { transform: rotate(360deg) scale(1);}
}


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