Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 40 из 53 · 9 мин
transition-property, duration, timing-function, delay, сокращение transition и cubic-bezier().
Кнопка при наведении резко меняет цвет. Как будто моргнула.
Скажи браузеру: «меняй цвет за 0.2 секунды» — transition.
transition-propertybackground-color, transform, all.transition-duration200ms, 0.3s.transition-timing-functionease, linear, ease-in, ease-out, ease-in-out.transition-delaytransitiontransition: background-color 0.2s ease-out.<style>
button { background: #c8763a; color: white; border: 0; padding: 8px 14px; border-radius: 8px; transition: background-color 0.3s ease; } button:hover { background-color: #7c3f1d; }
</style>
<button>Наведи на меня</button>cubic-bezier()cubic-bezier(.34, 1.56, .64, 1) — с лёгким «пружинящим» перелётом.<style>
.dot { width: 20px; height: 20px; border-radius: 50%; background: #c8763a; transition: transform .6s cubic-bezier(.34,1.56,.64,1); } .row:hover .dot { transform: translateX(120px); } .row { padding: 6px; background: #fdf6ec; }
</style>
<div class="row"><div class="dot"></div>Наведи</div>transition пишут на обычном состоянии, а не на :hover — тогда плавно и туда, и обратно.
Добавь кнопке .order transition: background-color 0.2s ease — цвет на :hover будет меняться плавно.
Выберите один ответ.
Куда лучше поставить transition, чтобы плавно было и при наведении, и при уходе мыши?
Введите короткий ответ без лишних пробелов.
Сколько миллисекунд в 0.25s? Введи число.
Проверяем состояние обучения…