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

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

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

• Пример CSS создание Микки Мауса

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

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

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

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

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

• CSS3 анимация для начинающих

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

Здесь не будет HTML кода. Все исходники Вы можете скачать ниже. Я только поясню саму анимацию CSS. Вот код, который нужен для анимации первого варианта анимации зрачков (он находится в конце файла style.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;}
}

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

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

Пример анимации Вы можете посмотреть Выше, а также скачать исходники, чтобы отредактировать их под себя.

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

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

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;}
}

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

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

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

Вывод

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

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

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

Успехов!

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