Retarder les animations CSS3

Question

J'ai une série de mots qui s'animent en utilisant css3. Une image de fond du globe et un lien stylisé suivent ces mots, également animés en css3. Mes ajouts finaux sont un bouton de plus en plus petit. Je veux que ceux-ci suivent et apparaissent/animent après ou en même temps que le lien style. Si quelqu'un pouvait suggérer que le code soit ajouté à mon #more, la section #less de css3 serait d'une grande aide. Merci, le code est ci-dessous.

#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

La meilleure façon que je peux penser est de compter combien de secondes dans l'animation tout le nécessaire pour que votre lien Styled apparaître puis définissez un délai pour l'animation des plus/moins de boutons, en utilisant les transition-delay property (ou si vous utilisez des images-clés animation-delay property). De cette façon, l'animation de ces éléments ne commencera pas tant que votre lien stylisé ne sera pas animé, ou ils ne s'animeront pas lorsque le lien stylisé s'anime.