CSS3 дозволяє не тільки підфарбовувати та переміщати блоки, але і додавати до всього цього добра різні анімації. І якщо постаратися, можна навіть зробити досить складні штуки.
Зараз ми розглянемо два варіанти їх створення.
І нам треба, щоб вона назад ставала квадратної при наведенні курсором. Окей, додаємо правило з псевдоклас: hover
Працює, але станів всього два: коло і квадрат. Ніякого переходу немає.
Додати його допоможе властивість transition.
Припустимо, що нам потрібно просто плавно протягом однієї секунди поміняти стан:
Якщо властивості переходу в обидві сторони однакові, то досить вказати властивість transition у основного елемента (як в прикладі), якщо ж вони повинні бути різними, то вказуйте кожномустаном відповідне значення властивості.
Готово, ви чудові!
До слова, якщо анімація повинна закінчитися в тому ж місці де почалася, можна to НЕ прописувати.
Окей, ми прописали ключові кадр, що тепер з цим робити?
Тепер треба викликати цю анімацію на потрібному об'єкті властивістю animation.
Припустимо нам потрібен період в 4 секунди, ну і нескінченність, звичайно ж.
Вийшло не дуже красиво, да? Бракує плавності.
Треба це виправити значенням animation-timing-function.
Зробимо так, щоб анімація більш плавно прискорювалася на початку кадру і сповільнювалася в кінці.
Ось тепер все чудово.
