#html #css-animations
Вопрос:
Что происходит с этим кодом ? как он функционирует и как я могу изменить его анимацию ?
h2 {
font-family: cursive;
}
h1 {
color: brown;
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 4.5s steps(450, end), blink-caret .95s step-end infinite;
} <h1>Hi</h1> Комментарии:
1. css-tricks.com/snippets/css/typewriter-effect
2. Код неполон. Пожалуйста, добавьте код для
animation typing
Ответ №1:
Вы можете изменить свойства анимации, отредактировав стенографию анимации, канонический порядок стенографии анимации выглядит следующим образом:
animation: keyframesName animation-duration animation-iteration-count Вы можете замедлить анимацию, увеличив продолжительность анимации в CSS следующим образом:
h1 {
color: brown;
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 8s steps(450, end), blink-caret .95s step-end infinite;
}
таким образом, в приведенном выше CSS время в стенографии анимации изменяется.
Кроме того, ваша анимация не работает, потому что вы не указали ключевые кадры, просто укажите ключевые кадры, которые доступны по ссылке, указанной вами в комментарии.
Ответ №2:
<html>
<head>
<style>
h1 {
font-family: cursive;
}
h1 {
background-color: red;
animation-name: example;
animation-duration: 9s;
}
@keyframes example {
from {background-color: red;}
to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Hi</h1>
</body>
</html> здравствуйте, ваш код неполон .
Ваш код должен выглядеть так же, как описано выше, и к нему должны быть применены теги.
Когда вы указываете стили CSS в правиле @keyframes, анимация будет постепенно меняться с текущего стиля на новый в определенное время.
В следующем примере анимация «пример» привязывается к элементу. Анимация продлится 9 секунд, и она будет постепенно менять цвет фона элемента с «красного» на «синий».
Ответ №3:
Да, вы можете замедлить его, добавив некоторые функции, такие как увеличение секунд анимации
animation:10s
также Вы можете использовать этот код здесь
h1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Ответ №4:
Одна из альтернатив, которую вы можете использовать в своем текущем методе, — это изменить ширину и положение h1, чтобы ваша анимация могла полностью распространяться только по тексту.
Прямо сейчас ваш заголовок расширяет всю ширину браузера, поэтому, экспериментируя, мы можем сделать вывод , что это так 50px , а затем использовать float: left
Далее нам нужно отредактировать анимацию. Обычно мы хотели бы, чтобы одновременно появлялась 1 буква, поэтому, поскольку слово «привет» состоит из двух букв, мы можем сделать это за 2 шага и за 1 секунду (время анимации полностью зависит от вас).
Поместив это в целом, вместе с редактированием анимации:
h2 {
font-family: cursive;
}
h1 {
width: 50px;
float: left;
color: brown;
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 1s steps(2), blink .5s infinite alternate;
}
/* text animation */
@keyframes typing{
0%{
width: 0
}
}
/* cursor animations */
@keyframes blink{
50% {
border-color: transparent
}
}
Если вы хотите, чтобы анимация была медленнее, вы можете увеличить время, необходимое для завершения анимации, отредактировав эту строку (вы увеличили бы 1 с после ввода до примерно 2 с).:
animation: typing 1s steps(2), blink .5s infinite alternate;