Лого www.SiteHere.ru

Пример CSS анимации — оживляем Микки Мауса

В прошлой статье Вы могли видеть хороший пример CSS, где я создал Микки Мауса без использования изображений. Но это еще не все что я хотел сделать с этим Микки Маусом. У меня появилась идея его немножко оживить. Как? Теперь глаза этого Микки Мауса двигаются в разные стороны. Также этот пример хорошо показывает как работать с ключевыми кадрами в CSS. Поэтому обязательно посмотрите этот урок и Вы поймете как создается анимация в этой технологии.

Как появился этот Микки Маус на «свет» Вы можете посмотреть на видео здесь:

1. Что будет в этом примере CSS?

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

Положения глаз Микки Мауса

2. Разные положения глаз

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

5 положений глаз

Если Вы хотите сделать на своём сайте небольшой блок, где люди должны дать отдых своим глазам и сделать зарядку для глаз, тогда этот пример CSS будет как раз кстати. Даже интересно как они будут выполнять 4-ю позицию 😆 . Все движения глаз Вы можете самостоятельно задавать как только позволит Ваше воображение. Но перед тем как разбираться с кодом, который находится ниже, я Вам рекомендую посмотреть простой урок по анимации, написанный мною пару дней назад:

После того как посмотрите этот урок, можете переходить к этому примеру. Вам главное понять основы на которых строится анимация, а дальше Вы сможете создавать что угодно!

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*анимация глаз*/
.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. Слегка сумасшедший Микки Маус

Слегка сумасшедший Микки Маус

В отличие от прошлого, здесь глаза двигаются не совсем синхронно. Также здесь поменьше ключевых кадров (всего на один 😆 ):

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*анимация глаз*/
.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;}
}

Несколько слов по поводу этого кода:

В этом коде изменилось лишь время анимации. Оно уменьшилась с 8 секунд до 1. А также изменились положения зрачка в ключевых кадрах, потому что они двигаются немного по иной траектории.

Смотреть АнимациюСкачать

Если Вам понравился этот пример — тогда качайте его и меняйте значения (положения зрачков) под себя.

Вывод

Ничего сложного в создании анимации на CSS нет! Изучите прошлую статьи по анимации и Вы поймете основы — а этого хватит хотя бы для того, чтобы Вы могли изменять чужой код. А если Вы хорошо разберетесь в основах, тогда сможете сделать и свою анимацию. Пример CSS анимации присылайте мне — мне очень интересно увидеть что получается у Вас.

Основные пункты статьи:

  1. Что будет в этом примере CSS?
  2. Разные положения глаз
  3. Слегка сумасшедший Микки Маус

Успехов!

С Уважением, Юрий Немец

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *