Задержка анимации перед началом

25.02.2018, 00:18. Показов 1259. Ответов 0

Метки анимация, задержка (Все метки)

Студворк — интернет-сервис помощи студентам

Всем привет!
Нашла неплохую анимацию текста, но текст висит просто на экране, а потом начинается проигрываться анимация, а мне надо, что бы вначале был пустой экран, а потом возникал текст с анимацией.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="css/app.css" style="stylesheet">
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
 
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
 
<style type="text/css">
  
@import "compass/css3";
 
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
 
body {
  background: black;
  overflow: hidden;
  font: 5vw/100vh "Finger Paint";
 
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}
 
span {
 overflow: hidden;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
}
 
span:nth-child(even){
 
  animation-name: smoky-mirror;
  animation-delay: 10s;
}
 
@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
 
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
 
@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
} 
 
</style>
 
 
</head>
<body>
 
<span>Think about who you are</span>
 
</body>
</html>

Добавлено через 4 минуты
все не надо. я добавила кадр 0% {
opacity:0;
}
и все пошло как надо

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

25.02.2018, 00:18

Ответы с готовыми решениями:

Задержка перед стартом нового цикла анимации
Мне нужно что бы происходила каждый раз 2 сек. задержка перед стартом нового цикла анимации. Пробую сделать через transition-delay, но...

Задержка анимации
Как задать задержку между анимацией? ну чтоб слово мелькало через каждые 3 секунды? @-webkit-keyframes flash { 0%, 100%...

Задержка анимации
Всем привет. Есть кнопочка, по ней пробегает блик, и анимация зациклена. Я использую свойство animation-delay: 2s чтобы отложить начало...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

25.02.2018, 00:18

Помогаю со студенческими работами здесь

Цикл и задержка анимации SVG
Здравствуйте! Есть Анимированный SVG Текст. https://codepen.io/FeeFort/pen/jdZKXE . Анимация зацикливается. Без задерки. Как сделать...

Изображение делает скачек вверх перед началом работы эффекта parallax
Доброго времени суток! Этот вопрос связан с javascript, но в том разделе не получил ответа, и думаю проблема возникла из-за какой-то...

Эффект ожидания перед воспроизведением анимации
Здравствуйте форумчане, хочу обратиться с незаурядной для меня проблемой. Думаю существует супер легкое решение. Но ничего придумать не...

Как сделать задержку, перед проигрыванием анимации css?
Для анимации формы-всплывашки использую keyframe и js для эффекта проявления и затухания. Как можно сделать задержку перед открытием...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

Наверх