Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

Как сделать больше задержку между fade in и fade out

Всем привет. Подскажите пожалуйста, как в 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); } }

On-site vacuum processing

Unit capacity adjustment

Remote operation

Customized filtration fineness

Recyclable filter media


Комментариев нет:

Отправить комментарий