Всем привет. Подскажите пожалуйста, как в css сделать задержку между анимациями дольше, то-есть я хочу чтоб текст который появляется, дольше оставался на странице, но чтоб его появление оставалось таким же резким как есть. Спасибо.
/* animate text */
body {
background: #000;
}
.sp-content h2 {
font-size: 46px !important;
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.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 1.5s ease-in backwards;
-ms-animation: blurFadeInOut 1.5s ease-in backwards;
animation: blurFadeInOut 1.5s 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 0px #fff;
}
.sp-container h2.frame-5 {
-webkit-animation: blurFadeIn 0.4s ease-in 12s backwards;
-moz-animation: blurFadeIn 0.4s ease-in 12s backwards;
-ms-animation: blurFadeIn 0.4s ease-in 12s backwards;
animation: blurFadeIn 0.4s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 0px #fff;
}
/**/
@-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(1.3);
}
20%,
75% {
opacity: 1;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #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 0px #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);
}
}
/**/
@-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1.3);
}
20%,
75% {
opacity: 1;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 0px #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);
}
}
/**/
@keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(5);
}
20%,
75% {
opacity: 1;
text-shadow: 0px 0px 0px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 0px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 0px #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);
}
}
On-site vacuum processing
Unit capacity adjustment
Remote operation
Customized filtration fineness
Recyclable filter media
Ответ
Ну дак вам необходимо просто взять коэффициент (я взял 3) и увеличить все delay в это количество раз, продолжительность в это количество раз. А в самих анимациях у вас указаны этапы анимации, ну вот собственно начальный и конечный этап (появление и исчезновение) сократить в это количество раз - т.е. в моем случае я 20% поделил на 3 (взял 7, для ровного счета), а время исчезновения сделал таким же как и появление т.е. 100%-7%. Если нужно как и было соотношение времени появления к времени исчезновения, то считайте как (100 - (100-75)/coeff)%
/* animate text */
body {
background: #000;
}
.sp-content h2 {
font-size: 46px !important;
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.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 9s ease-in backwards;
-moz-animation: blurFadeInOut 9s ease-in backwards;
-ms-animation: blurFadeInOut 9s ease-in backwards;
animation: blurFadeInOut 9s 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: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-3 {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 27s;
-moz-animation-delay: 27s;
-ms-animation-delay: 27s;
animation-delay: 27s;
}
.sp-container h2.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 0px #fff;
}
.sp-container h2.frame-5 {
-webkit-animation: blurFadeIn 0.4s ease-in 36s backwards;
-moz-animation: blurFadeIn 0.4s ease-in 36s backwards;
-ms-animation: blurFadeIn 0.4s ease-in 36s backwards;
animation: blurFadeIn 0.4s ease-in 36s backwards;
color: transparent;
text-shadow: 0px 0px 0px #fff;
}
/**/
@-webkit-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(1.3);
}
7%,93%{
opacity: 1;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #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 0px #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);
}
}
/**/
@-moz-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1.3);
}
7%,93%{
opacity: 1;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 0px #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);
}
}
/**/
@keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(5);
}
7%,93%{
opacity: 1;
text-shadow: 0px 0px 0px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 0px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 0px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 0px #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);
}
}
Комментариев нет:
Отправить комментарий