Доброго вам дня. 🙂
Хочу показати як можна організувати анімацію за допомогою CSS. Зараз багато хто почав використовувати таку анімацію, тому що вона не вимагає підключення сторонніх скриптів і бібліотек jQuery. У мене на сайті, на головній сторінці, в шапці, теж за допомогою CSS, з лівого боку виїжджає текст.
Існує дуже багато різних ефектів і я покажу деякі з них. Застосовувати такі ефекти можна де завгодно на своєму сайті, обмеження тільки у Вашій фантазії. Перший приклад я приведу як на своєму сайті, а інші вже будуть за тим же принципом, тільки різні стилі.
Щоб організувати анімацію, наприклад div -блока, для початку потрібно прописати HTML-код в тому місці сайту, де Ви хочете зробити анімацію.
Як бачите ми присвоїли блоку id і class. Причому, id можете ставити якийсь хочете, а class - це власне і буде ефект. Далі просто пишемо стилі і отримуємо готовий результат.
Спочатку просто стилі по розташуванню блоку, чи то пак id. Звичайно ж, Ви можете їх повністю змінити під свої потреби.
Далі йдуть стилі анімації class - slideRight.
CSS Рух вправо
2s - це час здійснення анімації. Думаю тут зрозуміло, складного нічого немає. Створили блок присвоїли йому стилі і привласнили стилі анімації - готово. Як і говорив це анімація - вправо, тобто рух блоку зліва направо.
Є ще пара ефектів, які Ви можете застосувати для здійснення анімації. Нижче я буду писати назву анімації і стилі. Щоб у Вас вона запрацювала, потрібно зробити все як і з першим ефектом, тільки class привласнити відповідно назві ефекту. І так по порядку:
CSS Рух вліво
Ефект схожий на перший, тільки тепер рух праворуч - ліворуч.
CSS Рух вниз
Такий же ефект з рухом вниз.
CSS Рух вгору
Рух здійснюється від низу до верху
CSS Рух вгору і розширення
Елемент підніметься від низу до верху, при цьому буде як би стислий по сторонам, після підйому, він різко розшириться і знайде нормальний вигляд.
CSS Рух вниз і розширення
Той же ефект, що і попередній, тільки рух зверху вниз.
CSS анімація поява збільшення
Елемент з'являється з центру і збільшується до нормального розміру
CSS анімація поява зменшення
Елемент з'являється з центру і збільшується до нормального розміру
CSS анімація поява розхитування
Елемент з'являється з центру, збільшується, при цьому розгойдується як гойдалки.
CSS анімація хитання
Елемент просто хитається як гойдалки до повної зупинки
CSS анімація стрибок падіння
Елемент піднімається вгору і різко падає вниз
CSS без безперервна пульсація
Елемент постійно пульсує без зупинки.
CSS рух вгору вниз
Елемент рухається вгору вниз, без зупинки.
CSS хитання без зупинки
Елемент буде гойдатися як гойдалки без зупинки
CSS анімація зростання
Елемент поступово виростає до повного розміру від низу до верху
CSS зростання зверху вниз
Такий же ефект як і попередній, тільки зростання зверху вниз
CSS зростання справа наліво
Елемент виростає справа наліво
CSS зростання зліва направо
Той же ефект, що і попередній, тільки навпаки, зліва направо.
Ось такі ось цікаві ефекти, можна використовувати у себе на сайті. Спробуйте кожен і побачите, який найбільше підійде Вам. Головне правильно присвоюйте клас, щоб все працювало! Всі стилі в одному файлі можна завантажити, натиснувши кнопку нижче
Можна підключити такий файл і різних елементів встановити різні класи і різну анімацію. Загалом застосовуйте як хочете, головне правильно і до місця 🙂
Ви використовуєте CSS анімацію у себе на сайті?
На цьому все, спасибі за увагу. 🙂
та без hover'a я прописую, ось є блок:
portfolio-description animation-name: portfolio-description;
-webkit-animation-name: portfolio-description;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible! important;
>
і при наведенні працює нормально. але коли курсор відводиш - без анімації. а куди hover ліпити я не розумію
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце