logo标签列表

延迟CSS3动画

css
6

我有一系列文字正在使用CSS3进行动画处理。地球的背景图像和样式化的链接跟随这些文字，同样使用CSS3进行动画处理。我的最后添加内容是更多和更少按钮。我希望它们能够紧随其后，在样式化链接之后出现/动画处理。如果有人可以建议在我的CSS3代码中添加到#more、#less部分的代码，那将是一个很大的帮助。 谢谢，以下是代码。

#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);
    }
}
你能否提供一个你现在运行的示例放到网上，这样可能会更好地了解你正在做什么。 - Tracker1
1
这是一个大学项目 - http://newmedia.leeds.ac.uk/ug10/cs10mm/abduction.html - Matt Murphy
1个回答
5
我能想到的最简单的方法是计算整个动画中需要多少秒才能让您的样式链接出现，然后使用transition-delay 属性（或如果您使用的是关键帧，则使用animation-delay 属性）为更多/更少按钮的动画设置延迟。这样，这些按钮的动画将在您的样式链接动画之后开始，或者它们将随着样式链接的出现而出现动画效果。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接