Verschiedene vor und nach den Animationen auf CSS

Question

Also, ich mag, dass die folgenden mit einem navbar tun:

auf schweben, verschwindet das Element, und wird durch den gleichen Text in einer anderen Farbe ersetzt.

die nach der Animation möchte ich etwas anderes (z. B. eine 360-Grad-Drehung) und dann original Span hängt an.

Ich kann die erste Animation funktionieren, kann aber nicht ändern, was passiert, ohne die erste zu ändern.

Arbeits JS Geige:

https://jsfiddle.net/whgeL8kw/

die CSS:

.nav-item { 
    padding: 0 15px; 
    border: 0; 
    margin-left:-12px; 
    margin-right:-12px; 
} 

.nav-item span { 
    -webkit-transition: 0.6s; 
    -moz-transition: 0.6s; 
    -o-transition: 0.6s; 
    transition: 0.6s; 
    -webkit-transition-delay: 0.2s; 
    -moz-transition-delay: 0.2s; 
    -o-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
} 

.nav-item > a > span { 
    font-family: Montserrat, serif; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 24px; 
    color: #fff; 
} 
.nav-item > a:before, 
.nav-item > a:after { 
    font-family: Montserrat, serif; 
    font-size: 16px; 
    line-height: 24px; 
    color: lightblue; 
    text-transform: uppercase; 
    content: ''; 
    position: absolute; 
    text-align: center; 
    opacity: 0; 
    transition: all .2s ease; 
} 


.nav-item > a:before { 
    font-family: Montserrat, serif; 
    font-size: 16px; 
    font-weight: 700; 
    line-height: 24px; 
    content: attr(data-hover); 
/* -webkit-transform: translate(0,150%); 
    -moz-transform: translate(0,150%); 
    -ms-transform: translate(0,150%); 
    -o-transform: translate(0,150%);*/ 
    transform: translateY(150%); 
} 


.nav-item > a:after { 
    opacity: 0; 
    content: attr(data-hover); 
    -webkit-transform: translate(0,150%); 
    -moz-transform: translate(0,150%); 
    -ms-transform: translate(0,150%); 
    -o-transform: translate(0,150%); 
    transform: rotate(-180deg); 
} 

.nav-item > a:hover span, 
.nav-item > a:active span { 
    opacity: 0; 
} 

.nav-item > a:hover:before { 
    opacity: 1; 
    -webkit-transform: translate(0,0); 
    -moz-transform: translate(0,0); 
    -ms-transform: translate(0,0); 
    -o-transform: translate(0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition-delay: .4s; 
    -moz-transition-delay: .4s; 
    -o-transition-delay: .4s; 
    transition-delay: .4s; 
} 
.nav-item > a:active:after { 
    opacity: 0; 
    -webkit-transform: translate(0,0); 
    -moz-transform: translate(0,0); 
    -ms-transform: translate(0,0); 
    -o-transform: translate(0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition-delay: .4s; 
    -moz-transition-delay: .4s; 
    -o-transition-delay: .4s; 
    transition-delay: .4s; 
} 

.nav-item > a:active:before { 
    -webkit-transform: translate(0,0); 
    -moz-transform: translate(0,0); 
    -ms-transform: translate(0,0); 
    -o-transform: translate(0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

Answer 1

Wenn ich richtig verstanden, Sie möchten eine Reihe von Animationen tun.

Wenn das der Fall ist, können Sie die Aufgabe erfüllen, indem CSS animations