Новий приклад css анімації - пожвавлюємо Міккі Мауса на css

У минулій статті Ви могли бачити хороший приклад CSS, де я створив Міккі Мауса без використання зображень. Але це ще не все що я хотів зробити з цим Міккі Маусом. У мене з`явилася ідея його трошки пожвавити. Як? Тепер очі цього Міккі Мауса рухаються в різні боки. Також цей приклад добре показує як працювати з ключовими кадрами в CSS. Тому обов`язково подивіться цей урок і Ви зрозумієте як створюється анімація в цій технології.

Як з`явився цей Міккі Маус на «світло» ви можете подивитися на відео тут:

Приклад CSS створення Міккі Мауса

1. Що буде в цьому прикладі CSS?

На зображення Ви можете бачити різні положення очей Міккі Мауса, які нижче будуть анімовані.

2. Різні положення очей

Всього тут буде 5 позицій, в яких будуть знаходиться зіниці його очей. Всі вони представлені на зображенні нижче:

Якщо Ви хочете зробити на своєму сайті невеликої блок, де люди повинні дати відпочинок своїм очам і зробити зарядку для очей, тоді цей приклад CSS буде якраз до речі. Навіть цікаво як вони будуть виконувати 4-у позицію # 128518; . Всі рухи очей Ви можете самостійно задавати як тільки дозволить Ваша уява. Але перед тим як розбиратися з кодом, який знаходиться нижче, я Вам рекомендую подивитися простий урок по анімації, написаний мною пару днів назад:

Відео: Приклад CSS - створення Міккі Мауса на чистому CSS

CSS3 анімація для початківців

Після того як подивіться цей урок, можете переходити до цього прикладу. Вам головне зрозуміти основи на яких будується анімація, а далі Ви зможете створювати будь!

Тут не буде HTML коду. Всі вихідні Ви можете завантажити нижче. Я тільки поясню саму анімацію CSS. Ось код, який потрібен для анімації першого варіанту анімації зіниць (він знаходиться в кінці файлу style.css):

CSS КОД

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

/ * Анімація очей * /.leftEye .zn {-webkit-animation: animLSitehere 8s infinite-animation: animLSitehere 8s infinite-}@ -webkit-keyframes animLSitehere {0% {left: 4px-top:31px-}20% {left: 4px-top:0px-}40% {left: 7px-top:15px-}60% {left: -1px-top:15px-}80% {left: 4px-top:15px-}100% {left: 4px-top:31px-}}@keyframes animLSitehere {0% {left: 4px-top:31px-}20% {left: 4px-top:0px-}40% {left: 7px-top:15px-}60% {left: -1px-top:15px-}80% {left: 4px-top:15px-}100% {left: 4px-top:31px-}}.rightEye .zn {-webkit-animation: animRSitehere 8s infinite-animation: animRSitehere 8s infinite-}@ -webkit-keyframes animRSitehere {0% {left: 4px-top:31px-}20% {left: 4px-top:0px-}40% {left: -1px-top:15px-}60% {left: 7px-top:15px-}80% {left: 4px-top:15px-}100% {left: 4px-top:31px-}}@keyframes animRSitehere {0% {left: 4px-top:31px-}20% {left: 4px-top:0px-}40% {left: -1px-top:15px-}60% {left: 7px-top:15px-}80% {left: 4px-top:15px-}100% {left: 4px-top:31px-}}

Вище Ви бачите робочий код з префіксами для різних браузерів. Всі інші пояснення по коду розташовані в блоці нижче:

Вся суть анімації в тому, щоб змінювати положення зіниць, які вже знаходяться у абсолютному позиціонуванні. Для цього ми будемо змінювати властивості top і left в CSS.
Анімовані обидва зіниці, тому для кожного з них необхідно було написати свої ключові кадри. Ключові кадри для лівого зіниці називаються animLSitehere, а для правого - animRSitehere.
У кожного з зіниць необхідно задати йому відповідну анімацію. Робиться це за допомогою властивості animation. Далі синтаксис наступний: "animation: названіе_ключевих_кадров длітельность_анімаціі колічество_повторов". Надеюсь не заплутав Вас. Але я Вас розумію, новачкові це так легко зрозуміти з першого разу.
У ключових кадрах з допомогою відсотків я вказав які ключові кадри мені потрібні. Тобто де в цих кадрах повинен знаходиться зіниця.

дивитися АнімаціюСкачать

Приклад анімації Ви можете подивитися Вище, і навіть завантажити вихідні, щоб відредагувати їх під себе.

3. Злегка божевільний Міккі Маус

На відміну від минулого, тут очі рухаються не зовсім синхронно. Також тут поменше ключових кадрів (всього на один # 128518; ):

CSS КОД

Відео: CSS Анімація - стрибучий м`яч | урок по CSS і CSS3, анімація

123456789101112131415161718192021222324252627282930313233343536373839404142

/ * Анімація очей * /.leftEye .zn {-webkit-animation: animLSitehere 1s infinite-animation: animLSitehere 1s infinite-}@ -webkit-keyframes animLSitehere {0% {left: 4px-top:31px-}25% {left: 6px-top:15px-}50% {left: 3px-top:0px-}75% {left: -1px-top:15px-}100% {left: 4px-top:31px-}}@keyframes animLSitehere {0% {left: 4px-top:31px-}25% {left: 6px-top:15px-}50% {left: 3px-top:0px-}75% {left: -1px-top:15px-}100% {left: 4px-top:31px-}}.rightEye .zn {-webkit-animation: animRSitehere 1s infinite-animation: animRSitehere 1s infinite-}@ -webkit-keyframes animRSitehere {0% {left: 4px-top:31px-}25% {left: -1px-top:15px-}50% {left: 3px-top:0px-}75% {left: 7px-top:15px-}100% {left: 4px-top:31px-}}@keyframes animRSitehere {0% {left: 4px-top:31px-}25% {left: -1px-top:15px-}50% {left: 3px-top:0px-}75% {left: 7px-top:15px-}100% {left: 4px-top:31px-}}

Відео: SVG анімації - CSS, SMIL і Snap.svg

Кілька слів з приводу цього коду:

У цьому коді змінилося лише час анімації. Воно зменшилася з 8 секунд до 1. А також змінилися положення зіниці в ключових кадрах, тому що вони рухаються трохи по іншій траєкторії.

дивитися АнімаціюСкачать

Якщо Вам сподобався цей приклад - тоді качайте його і міняйте значення (положення зіниць) під себе.

висновок

Нічого складного в створенні анімації на CSS немає! Вивчіть минулої статті по анімації та Ви зрозумієте основи - а цього вистачить хоча б для того, щоб Ви могли змінювати чужий код. А якщо Ви добре розберетеся в основах, тоді зможете зробити і свою анімацію. Приклад CSS анімації надсилайте мені - мені дуже цікаво побачити що виходить у Вас.

Основні пункти статті: