Trì hoãn hoạt ảnh CSS3

Question

Tôi có một loạt các từ hoạt ảnh, sử dụng css3. Một hình nền của quả địa cầu và một liên kết theo kiểu theo những từ này, cũng hoạt hình trong css3. Bổ sung cuối cùng của tôi là một nút ngày càng ít. Tôi muốn những người này theo dõi và xuất hiện/animate sau hoặc cùng lúc với liên kết được tạo kiểu. Nếu bất cứ ai có thể đề nghị mã được thêm vào #more của tôi, #less phần của css3 sẽ là một trợ giúp lớn. Cảm ơn bạn, mã bên dưới.

#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

Cách đơn giản nhất tôi có thể nghĩ là để đếm có bao nhiêu giây trong toàn bộ hoạt hình của bạn mà phải mất cho liên kết theo kiểu của bạn xuất hiện và sau đó thiết lập một sự chậm trễ cho các hình ảnh động của các chi tiết/nút ít hơn, bằng cách sử dụng transition-delay property (hoặc nếu bạn đang sử dụng khung hình chính animation-delay property). Bằng cách đó, hoạt ảnh cho những ảnh này sẽ không bắt đầu cho đến khi hoạt ảnh liên kết được tạo kiểu của bạn hoặc chúng sẽ hoạt hình như hoạt ảnh liên kết theo kiểu.