Задержка CSS3-анимации - PullRequest
Новая
       1

Задержка CSS3-анимации

6 голосов
/ 06 января 2012

У меня есть серия анимированных слов с использованием css3. За этими словами следуют фоновое изображение шара и стилизованная ссылка, также анимированные в css3. Мои последние дополнения - кнопка более и менее. Я хочу, чтобы они следовали их примеру и появлялись / анимировались после или одновременно со стилизованной ссылкой. Если бы кто-нибудь мог предложить код, добавляемый в мой #more, раздел #less css3 был бы большой помощью. Спасибо, код ниже. 

#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);
    }
}

1 Ответ

5 голосов
/ 06 января 2012

Самый простой способ, который я могу придумать, - это подсчитать, сколько секунд в вашей анимации, сколько потребуется, чтобы появилась ваша стилизованная ссылка, а затем установить задержку для анимации кнопок «больше / меньше», используя переход -delay свойство (или, если вы используете ключевые кадры, свойство animation-delay ). Таким образом, анимация для них не запустится до тех пор, пока не будет анимирована ваша стилизованная ссылка, или они будут анимированы по мере анимации стилизованной ссылки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...