CSS3: Линии текста, скользящие на страницу в разное время

У меня есть код, показанный ниже, который перемещает текст на страницу справа налево, используя анимацию css3.
Я использую другую задержку анимации для каждой строки, но у меня есть проблема, что до начала анимации строки уже видны слева, и я не хочу этого.
Есть ли какие-либо средства
a) сохранить невидимые текстовые строки до начала анимации или
b) простой способ загрузить строки в разное время (возможно, используя javascript setTimeout?) Или другие трюки?
(примечание: я использую Firefox 35.0.1)
CSS3: Линии текста, скользящие на страницу в разное время

Помощь была бы очень признательна!

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
h1 { 
 
    animation-name: slidein; 
 
    animation-duration: 2s; 
 
    animation-timing-function: ease-in-out; 
 
    color: red; 
 
    font-size: 3.5em; 
 
    font-family: Arial; 
 
    font-weight:bold; 
 
} 
 

 
@keyframes slidein { 
 
    0% { margin-left: 100%; } 
 
    100% { margin-left: 0%; } 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<h1 style="animation-delay: 0s;">ONE</h1> 
 
<h1 style="animation-delay: 1s;">TWO</h1> 
 
<h1 style="animation-delay: 3s;">THREE</h1> 
 

 
</body> 
 
</html>

источник

2015-01-30 Alfred

Просто добавьте opacity: 0; к исходному элементу и opacity: 1; к анимации. Однако после завершения анимации вам необходимо сохранить непрозрачность. Поэтому на помощь приходит animation-fill-mode: forwards;.

Update: с помощью transform: translate(100%); благодаря @Luca Detomi

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

<!DOCTYPE html> 
 
<html> 
 
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script> 
 

 
<head> 
 
<style> 
 

 
h1 { 
 
    animation-name: slidein; 
 
    animation-duration: 2s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: forwards; 
 
    color: red; 
 
    font-size: 3.5em; 
 
    font-family: Arial; 
 
    font-weight:bold; 
 
    opacity: 0; 
 
} 
 

 
@keyframes slidein { 
 
    0% { transform: translate(101%); opacity:1; } 
 
    100% { transform: translate(0%); opacity:1;} 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<h1 style="animation-delay: 0s;">ONE</h1> 
 
<h1 style="animation-delay: 1s;">TWO</h1> 
 
<h1 style="animation-delay: 3s;">THREE</h1> 
 

 
</body> 
 
</html>

источник

2015-01-30 14:25:31

Кстати, я использую Chrome и, тем самым, огромная библиотека prefixfree здесь. (Предполагая, что предпочтение браузера других пользователей не является хорошей практикой для разработчиков F2E, действительно) –

Я попробовал начальную непрозрачность: 0; и конечная непрозрачность: 1; раньше, и это не сработало, потому что текст был чистым после амитации. Но используя анимацию-fill-mode: forwards; это работает, это был секрет! Спасибо! – Alfred

И спасибо за подсказку с префикс-библиотекой для Google Chrome, я не видел ее сначала, но это очень полезно! – Alfred

Добавить Маржа налево более чем на 100%

h1 { 
    animation-name: slidein; 
    animation-duration: 5s; 
    animation-timing-function: ease-in-out; 
    color: red; 
    font-size: 3.5em; 
    font-family: Arial; 
    font-weight:bold; 
    margin-left: 105%; 
} 

@keyframes slidein { 
    0% { margin-left: 105%; } 
    100% { margin-left: 0%; } 
}

источник

2015-01-30 14:25:29 user3030212

Вы можете просто установить более высокое значение маржинальной слева, например, «101% », и тексты исчезают.

Во всяком случае я предлагаю вам тот заменить margin-left с CSS переводом, согласно this link, для лучшей производительности. В этом последнем случае из-за специфического поведения преобразования CSS (объяснено here) вам также не нужно overflow:hidden на теге Body, чтобы избежать горизонтальных полос прокрутки.

@keyframes slidein { 
     0% { transform: translate(101%); } 
     100% { transform: translate(0%); } 
    }

Или, если вы не хотите, чтобы установить «странное» более чем на 100% стоимости, вы могли бы объединить мое решение, с одной @Herrington Darkholme «s.

источник

2015-01-30 14:26:34

Изменение на 100% до 101% не помогло решить эту проблему (очистка исходного текста на ** слева **), по крайней мере, в моем браузере. И transform: translate вместо margin-left слишком загадочно для моего вкуса (я тоже не заметил разницы в моем браузере), но спасибо вам. – Alfred

Другое решение этой проблемы:
Мы начинаем с witdh: 0px и overflow: hidden; (невидимая) и конечная ширина: 300 пикселей.

<!DOCTYPE html> 
 
<html> 
 
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script> 
 

 
<head> 
 
<style> 
 

 
h1 { 
 
    animation-name: slidein; 
 
    animation-duration: 2s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: forwards; 
 
    color: red; 
 
    font-size: 3.5em; 
 
    font-family: Arial; 
 
    font-weight:bold; 
 
    width:0px; 
 
    overflow:hidden; 
 
} 
 

 
@keyframes slidein { 
 
    0% { margin-left: 100%; width:300px; } 
 
    100% { margin-left: 0%; width:300px;} 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<h1 style="animation-delay: 0s;">ONE</h1> 
 
<h1 style="animation-delay: 1s;">TWO</h1> 
 
<h1 style="animation-delay: 2s;">THREE</h1> 
 

 
</body> 
 
</html>

источник

2015-01-31 09:09:14 Alfred

CSS3: Линии текста, скользящие на страницу в разное время

ответ

Смежные вопросы