CSS3 animasyonlarının geciktirilmesi

Question

Css3'ü kullanarak bir dizi canlandırma işlemine sahibim. Dünyanın bir arka plan görüntüsü ve stillenmiş bir bağlantı, css3'te de canlandırılan bu kelimeleri takip eder. Son eklemelerim daha çok ve daha az buton. Bunların tarzını takip etmesini istiyorum ve stilize bağlantı ile aynı anda veya aynı zamanda görünecek/canlandıracağım. Kimse benim koduma #more eklenmesi önerilebilirse, css3'ün #less bölümü büyük bir yardım olur. Teşekkür ederim, kod aşağıda. Aklıma

#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

kolay yolu görünmesinin tarz bağlantı için alır ve daha sonra kullanarak, daha fazla/az düğmelerin animasyon için bir gecikme tüm animasyon kaç saniye saymaktır transition-delay property (veya anahtar kareleri animation-delay property kullanıyorsa). Bu şekilde, bunlar için animasyon, stilize olan bağlantınız canlandırılıncaya kadar başlamaz ya da stillenmiş bağlantı canlandırıldığında canlandırılır.