Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 14.08.2020
Сообщений: 1
1

Анимация в css набор текста

14.08.2020, 11:54. Просмотров 203. Ответов 1
Метки нет (Все метки)


Никак не могу сделать чтобы текст набирался по очередно
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
<!DOCTYPE>
<html> 
<head>
 
    <meta charset="UTF-8">
    <title>Помогите :c</title>
    <script type="eel.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
 
</head>
<body>
 
    <div class="block1">
 
        Пример 1 текста
 
    </div>
 
    <div class="block2">
        
        Пример 2 текста
 
    </div>
 
</body>
</html>
CSS
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
* {
    font-family: 'Press Start 2P', cursive;
}
 
body {
    word-break: all;
    background: #200122;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6f0000, #200122);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6f0000, #200122); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
 
    color: white;
 
}
div {
 
    word-break: all;
    width: 40em;
    color: white;
    font-size: 22px;
    white-space:nowrap;
    overflow:hidden;
 
    
}
.block1
{
    
   -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
 
}
@keyframes type{
    from { width: 0; }
    
}
 
@-webkit-keyframes type{
    from { width: 0; }
}
 
.block2
{
 
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
 
}
@keyframes type{
    from { width: 0; }
    
}
 
@-webkit-keyframes type{
    from { width: 0; }
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.08.2020, 11:54
Ответы с готовыми решениями:

Анимация CSS появление текста сверху
Подскажите, пожалуйста, что почитать по анимации CSS, нахожу только короткие статьи. Или если есть...

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

Css 3 анимация
Нигде не нашел ответ прошу помощи. Как реализовать задержку старта анимации. Либо скрыть само...

Анимация css
Ребятки, проблема с анимацией CSS. Я в этой теме плаваю, поэтому много вопросов возникает. Хочу...

1
0 / 0 / 0
Регистрация: 27.06.2020
Сообщений: 15
14.08.2020, 20:10 2
Возможно, я не прав, ибо сам новичок.

Но в @keyframes должно быть перечисление ключевых кадров, то есть from, to или в процентах 0 - 100%, попробуй сделать второй кадр, но вряд ли получится :/
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.08.2020, 20:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Анимация на css
Всем добрый день! Подскажите пожалуйста, хочу сделать следующую анимацию: 1) При наведении мыши...

Анимация css
Здрраовствуйте, уважаемые форумчане. Недавно углубившиюсь в азы анимации на css понял --...

Css анимация
Делаю прелоадер на страницу. Сделала вот такой, но попросили задействовать меньше divов....

Анимация CSS
Подскажите анимацию CSS.На картинке есть кнопка подскажите анимацию что бы при наведении на кнопку...

Анимация css
#fon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:...

CSS анимация
Всем привет, есть следующая анимация: &lt;div class=&quot;image-placeholder&quot;&gt; &lt;div class=&quot;image...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.