Ritardare animazioni CSS3

Question

Ho una serie di parole che animano, usando css3. Un'immagine di sfondo del globo e un collegamento stilizzato seguono queste parole, anch'esse animate in css3. Le mie aggiunte finali sono un pulsante più e meno. Voglio che questi seguano l'esempio e compaiano/animino dopo o allo stesso tempo del collegamento in stile. Se qualcuno potesse suggerire il codice da aggiungere alla mia #more, #less sezione di css3 sarebbe di grande aiuto. Grazie, il codice è sotto.

#more, #less { 
    background:none; 
    border:none; 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
    cursor: pointer; 

} 

.fb-like { 
    float:left; 
} 

h1.main,p.demos { 
     -webkit-animation-delay: 18s; 
     -moz-animation-delay: 18s; 
     -ms-animation-delay: 18s; 
    animation-delay: 18s; 
} 
.sp-container { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
    background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
} 
.sp-content { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: 5; 
} 
.sp-container h2 { 
    position: absolute; 
    top: 50%; 
    line-height: 100px; 
    height: 100px; 
    margin-top: -50px; 
    font-size: 100px; 
    width: 100%; 
    text-align: center; 
    color: transparent; 
     -webkit-animation: blurFadeInOut 3s ease-in backwards; 
     -moz-animation: blurFadeInOut 3s ease-in backwards; 
     -ms-animation: blurFadeInOut 3s ease-in backwards; 
    animation: blurFadeInOut 3s ease-in backwards; 
} 
.sp-container h2.frame-1 { 
     -webkit-animation-delay: 0s; 
     -moz-animation-delay: 0s; 
     -ms-animation-delay: 0s; 
    animation-delay: 0s; 
} 
.sp-container h2.frame-2 { 
     -webkit-animation-delay: 3s; 
     -moz-animation-delay: 3s; 
     -ms-animation-delay: 3s; 
    animation-delay: 3s; 
} 
.sp-container h2.frame-3 { 
     -webkit-animation-delay: 6s; 
     -moz-animation-delay: 6s; 
     -ms-animation-delay: 6s; 
    animation-delay: 6s; 
} 
.sp-container h2.frame-4 { 
    font-size: 200px; 
    -webkit-animation-delay: 9s; 
    -moz-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
} 
.sp-container h2.frame-5 { 
     -webkit-animation: none; 
     -moz-animation: none; 
     -ms-animation: none; 
    animation: none; 
    color: transparent; 
    text-shadow: 0px 0px 1px #fff; 
} 
.sp-container h2.frame-5 span { 
     -webkit-animation: blurFadeIn 3s ease-in 12s backwards; 
     -moz-animation: blurFadeIn 1s ease-in 12s backwards; 
     -ms-animation: blurFadeIn 3s ease-in 12s backwards; 
     animation: blurFadeIn 3s ease-in 12s backwards; 
    color: transparent; 
    text-shadow: 0px 0px 1px #fff; 
} 
.sp-container h2.frame-5 span:nth-child(2) { 
     -webkit-animation-delay: 13s; 
     -moz-animation-delay: 13s; 
     -ms-animation-delay: 13s; 
    animation-delay: 13s; 
} 
.sp-container h2.frame-5 span:nth-child(3) { 
     -webkit-animation-delay: 14s; 
     -moz-animation-delay: 14s; 
     -ms-animation-delay: 14s; 
    animation-delay: 14s; 
} 
.sp-globe { 
    position: absolute; 
    width: 282px; 
    height: 273px; 
    left: 50%; 
    top: 50%; 
    margin: -137px 0 0 -141px; 
    background: transparent url(images/globe.png) no-repeat top left; 
     -webkit-animation: fadeInBack 3.6s linear 14s backwards; 
     -moz-animation: fadeInBack 3.6s linear 14s backwards; 
     -ms-animation: fadeInBack 3.6s linear 14s backwards; 
    animation: fadeInBack 3.6s linear 14s backwards; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
     -webkit-transform: scale(5); 
     -moz-transform: scale(5); 
     -o-transform: scale(5); 
     -ms-transform: scale(5); 
    transform: scale(5); 
} 
.sp-circle-link { 
    position: absolute; 
    left: 50%; 
    bottom: 120px; 
    margin-left: -50px; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background: #666; 
    color: #FFF; 
    font-size: 20px; 
    font-weight:bolder; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
    border-radius: 50%; 
     -webkit-animation: fadeInRotate 1s linear 16s backwards; 
     -moz-animation: fadeInRotate 1s linear 16s backwards; 
     -ms-animation: fadeInRotate 1s linear 16s backwards; 
    animation: fadeInRotate 1s linear 16s backwards; 
     -webkit-transform: scale(1) rotate(0deg); 
     -moz-transform: scale(1) rotate(0deg); 
     -o-transform: scale(1) rotate(0deg); 
     -ms-transform: scale(1) rotate(0deg); 
    transform: scale(1) rotate(0deg); 
} 
.sp-circle-link:hover { 
    background: #333; 
    color: #FC0; 
    text-shadow:none; 
} 

#find { 
    padding-top:25%; 
} 

/**/ 
@-webkit-keyframes blurFadeInOut{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     -webkit-transform: scale(1.3); 
    } 
    20%,75%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     -webkit-transform: scale(1); 
    } 
    100%{ 
     opacity: 0; 
     text-shadow: 0px 0px 50px #fff; 
     -webkit-transform: scale(0); 
    } 
} 
@-webkit-keyframes blurFadeIn{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     -webkit-transform: scale(1.3); 
    } 
    50%{ 
     opacity: 0.5; 
     text-shadow: 0px 0px 10px #fff; 
     -webkit-transform: scale(1.1); 
    } 
    100%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     -webkit-transform: scale(1); 
    } 
} 
@-webkit-keyframes fadeInBack{ 
    0%{ 
     opacity: 0; 
     -webkit-transform: scale(0); 
    } 
    50%{ 
     opacity: 0.4; 
     -webkit-transform: scale(2); 
    } 
    100%{ 
     opacity: 0.2; 
     -webkit-transform: scale(5); 
    } 
} 
@-webkit-keyframes fadeInRotate{ 
    0%{ 
     opacity: 0; 
     -webkit-transform: scale(0) rotate(360deg); 
    } 
    100%{ 
     opacity: 1; 
     -webkit-transform: scale(1) rotate(0deg); 
    } 
} 
/**/ 
@-moz-keyframes blurFadeInOut{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     -moz-transform: scale(1.3); 
    } 
    20%,75%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     -moz-transform: scale(1); 
    } 
    100%{ 
     opacity: 0; 
     text-shadow: 0px 0px 50px #fff; 
     -moz-transform: scale(0); 
    } 
} 
@-moz-keyframes blurFadeIn{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     -moz-transform: scale(1.3); 
    } 
    100%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     -moz-transform: scale(1); 
    } 
} 
@-moz-keyframes fadeInBack{ 
    0%{ 
     opacity: 0; 
     -moz-transform: scale(0); 
    } 
    50%{ 
     opacity: 0.4; 
     -moz-transform: scale(2); 
    } 
    100%{ 
     opacity: 0.2; 
     -moz-transform: scale(5); 
    } 
} 
@-moz-keyframes fadeInRotate{ 
    0%{ 
     opacity: 0; 
     -moz-transform: scale(0) rotate(360deg); 
    } 
    100%{ 
     opacity: 1; 
     -moz-transform: scale(1) rotate(0deg); 
    } 
} 
/**/ 
@keyframes blurFadeInOut{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     transform: scale(1.3); 
    } 
    20%,75%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     transform: scale(1); 
    } 
    100%{ 
     opacity: 0; 
     text-shadow: 0px 0px 50px #fff; 
     transform: scale(0); 
    } 
} 
@keyframes blurFadeIn{ 
    0%{ 
     opacity: 0; 
     text-shadow: 0px 0px 40px #fff; 
     transform: scale(1.3); 
    } 
    50%{ 
     opacity: 0.5; 
     text-shadow: 0px 0px 10px #fff; 
     transform: scale(1.1); 
    } 
    100%{ 
     opacity: 1; 
     text-shadow: 0px 0px 1px #fff; 
     transform: scale(1); 
    } 
} 
@keyframes fadeInBack{ 
    0%{ 
     opacity: 0; 
     transform: scale(0); 
    } 
    50%{ 
     opacity: 0.4; 
     transform: scale(2); 
    } 
    100%{ 
     opacity: 0.2; 
     transform: scale(5); 
    } 
} 
@keyframes fadeInRotate{ 
    0%{ 
     opacity: 0; 
     transform: scale(0) rotate(360deg); 
    } 
    100%{ 
     opacity: 1; 
     transform: scale(1) rotate(0deg); 
    } 
} 

Answer 1

Il modo più semplice che posso pensare è quello di contare quanti secondi in tutta la tua animazione che ci vuole per il tuo link Styled di apparire e quindi impostare un ritardo per l'animazione dei/meno pulsanti più, utilizzando il transition-delay property (o se si utilizzano i fotogrammi chiave animation-delay property). In questo modo, l'animazione per questi non verrà avviata fino a quando il tuo collegamento stilizzato non si animerà, o animeranno dentro come il collegamento stilizzato si anima.