Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 42 из 53 · 12 мин
@keyframes, animation-name, duration, iteration-count, direction, fill-mode, play-state и сокращение animation.
Индикатор «в сети» мягко пульсирует. Бесконечно.
transition — реакция на изменение. А сама по себе, по кадрам, — @keyframes.
@keyframes@keyframes rise { from { … } to { … } } или проценты 0%, 50%, 100%.<style>
@keyframes rise { from { transform: translateY(10px); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(-14px); opacity: 0; } } .pulse { animation: rise 2s ease-in-out infinite; font-size: 24px; color: #c8763a; }
</style>
<div class="pulse">〰</div>☕animation-name@keyframes.animation-durationanimation-iteration-countinfinite.animation-directionnormal, reverse, alternate — туда-обратно.<style>
@keyframes sway { to { transform: rotate(12deg); } } .leaf { display: inline-block; animation: sway 1s ease-in-out infinite alternate; font-size: 24px; }
</style>
<span class="leaf">🍃</span>animation-fill-modeforwards — оставить последний кадр после конца.animation-delayanimation-play-statepaused / running.animationanimation: rise 2s ease-in-out infinite.Реакция на действие — transition. Своё движение по кадрам — @keyframes + animation.
Опиши @keyframes rise с кадром to { opacity: 0; } и запусти её у .pulse: animation: rise 2s infinite.
Выберите один ответ.
Какое значение animation-iteration-count повторяет анимацию бесконечно?
Выберите один ответ.
Как оставить элемент в последнем кадре после окончания анимации?
Выберите все подходящие варианты.
Где нужен именно @keyframes, а не transition?
Проверяем состояние обучения…