html.okpython.net
Основы создания сайтов
CSS :: Правило @keyframes
css-правило @keyframes (от англ. keyframes – ключевые кадры) устанавливает ключевые кадры при анимации элемента, которые определяют поведение одного цикла анимации и представляют собой конкретные стилевые свойства элемента в ключевых точках анимации.
Синтаксис
@keyframes <имя анимации> { [ from | to | <проценты> ]# }
Значения
- имя анимации – имя анимации, для которой устанавливаются ключевые кадры (задается при помощи свойства animation-name).
- проценты – проценты рассчитываются относительно промежутка времени всей анимации.
- from – задает первый ключевой кадр (аналог значения 0%).
- to – задает последний ключевой кадр (аналог значения 100%).
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-animations/#keyframes
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 0px; width: 460px; height: 110px; border: solid 4px red; animation-name: example_1, example_2; animation-duration: 3s; animation-timing-function: ease-in-out; animation-delay: 700ms; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: backwards; } @keyframes example_1{ 0% { background: #ff0000; height: 0px; } 50% { background: #00ff00; height: 400px; } 100% { background: #0000ff; height: 200px; } } @keyframes example_2{ from { width: 0px; } to { width: 500px; } } </style> </head> <body> <p> </p> </body> </html>
Пример №1