Приклади анімації і переходів псевдоелемент

22

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

Сьогодні ми збираємося поекспериментувати з анімацією і переходами стосовно псевдоелемент (:before :after) і розкрити їх потенціал. Ми трохи поговоримо про анімації псевдоелемент і розглянемо чотири приклади, де застосовуються спеціальні техніки досягнення багатьох ефектів. Спочатку давайте розглянемо переваги і недоліки застосування до псевдоелемент анімації і переходів.

Приклади анімації і переходів псевдоелементПриклади анімації і переходів псевдоелемент

ПЕРЕВАГИ

Спрощення та оптимізація розмітки HTML

Використання можливостей CSS3

Внесення визначеного вкладу в дизайн

НЕДОЛІКИ

Підтримка тільки сучасних браузерів типу Firefox, IE10 і, останнім часом, Chrome (для інформації дивіться оновлену таблицю підтримки)

Поки не працює в мобільних браузерах

Псевдоелементи не можна ідентифікувати по ID

Псевдоелементи не з’являються в DOM.

Псевдоелементи не можна анімувати за допомогою JavaScript

Зрозуміло, що більше недоліків, ніж переваг, але я вважаю, що слід подумати про майбутнє і дати їм шанс!

Наступні чотири приклади були створені спеціально для цієї статті. Звичайно, існують інші способи домогтися тих же візуальних ефектів, але заради цього експерименту ми, звичайно, використовуємо псевдоелементи, так що пам’ятайте, що вони працюють тільки в браузерах, які підтримують їх анімація і переходи.

Будь ласка, зверніть увагу:

У цьому підручнику ми пропустимо вендорные префікси, але ви побачите їх у файли для скачування.

У прикладах ми в основному будемо застосовувати властивість box-shadow і одиниці EM.

Дуже цікавий факт: псевдоелементи успадковують властивості від батьківського елементу. У випадку з анімацією всі зміни діють на них безпосередньо. Це буде зручно, якщо потрібно збільшити до максимуму їх підтримку. Щоб дізнатися про це більше, прочитайте Застосуйте переходи CSS до псевдоелемент прямо зараз (Use CSS transitions for pseudo-elements right now)Романа Комарова.

Давайте почнемо!

ПРИКЛАД 1

Приклади анімації і переходів псевдоелемент

Спочатку потрібно зробити кумедну штуку: анімацію водної краплі, що падає в закруглений контейнер (на основі логотипу Codrops)

Розмітка

У нас всього один елемент, хоча у нього міг бути контейнер, що допомагає змінювати рівень.

CSS

*,
*:before,
*:after {
box-sizing: border-box;
}
.drop {
background: rgba(255, 255, 245, 1);
border: 4px solid rgba(255, 245, 235, 1);
border-radius: 100%;
box-shadow: inset -0.1 em 0 2em 0.5 em rgba(255, 255, 255, 0.5),
inset -0.1 em 0 0.5 em 0 rgba(0, 0, 0, 0.8);
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
}
.drop:before,
.drop:after {
content:»»;
display:block;
position:absolute;
}
/* Крапля */
.drop:before {
background: rgba(167, 217, 234, 1);
border-radius: 100%;
/* Початок капелі */
box-shadow: 0 0 0 0.1 em rgba(167, 217, 234, 0.8),
0 0 0 0.15 em rgba(167, 217, 234, 0.8),
0 0 0 0.2 em rgba(167, 227, 234, 0.8),
0 0 0 0.25 em rgba(167, 227, 234, 0.8),
0 0 0 0.3 em rgba(167, 227, 234, 0.8),
0 0 0 0.35 em rgba(167, 227, 234, 0.8),
0 0 0 0.4 em rgba(167, 227, 234, 0.8),
0 0 0 0.45 em rgba(167, 227, 234, 0.8),
0 0 0 0.5 em rgba(167, 227, 234, 0.8);
top: 0%; left: 50%;
/*Ширина «ширина» та » висота «height» поділу повинні бути менше загального розміру «box-shadow». Так ми зможемо контролювати різні типи розмірів. */
width: 0.2 em;
height: 0.2 em;
animation: fall 3.5 s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}
/* Поверхня */
.drop:after {
background: rgb(52, 152, 219);
background: linear-gradient(rgba(52, 255, 255, 1) 0%, rgba(52, 152, 219, 1) 10%, rgba(152, 252, 219, 1) 100%);
border-radius: 100% 0 50% 0;
left: 0;
bottom: 0;
width: inherit;
height: 3em;
opacity: 0.7;
animation: surface 3s linear infinite;
}
/* Анімація капелі */
@keyframes fall {
/* Форма краплі */
5%, 15% {
box-shadow: 0 -1.4 em 0 0.1 em rgba(167, 217, 234, 1),
0 -0.8 em 0 0.15 em rgba(167, 217, 234, 1),
0 -0.3 em 0 0.2 em rgba(167, 217, 234, 1),
0 -0.1 em 0 0.25 em rgba(167, 217, 234, 1),
0 0 0 0.3 em rgba(167, 217, 234, 1),
0 0.2 em 0 0.35 em rgba(167, 217, 234, 1),
0 0.4 em 0 0.4 em rgba(167, 217, 234, 1),
0 0.6 em 0 0.45 em rgba(167, 217, 234, 1),
0 0.8 em 0 0.5 em rgba(167, 217, 234, 1);
}
/* Падіння краплі */
16% {
top: 80%;
}
/* Контакт з поверхнею */
18% {
top: 80%;
box-shadow: 1em -8em 0 0.2 em rgba(177, 227, 234, 1),
-2.2 em -3.8 em 0 0.1 em rgba(177, 227, 234, 1),
3em -2.85 em 0 0.3 em rgba(177, 227, 234, 1),
-3.5 em -4em 0 0.2 em rgba(177, 227, 234, 1),
0 0 0 0.3 em rgba(177, 227, 234, 1),
2em -2em 0 0.2 em rgba(177, 227, 234, 1),
-0.3 em -3em 0 0.2 em rgba(177, 227, 234, 1),
0.5 em -5em 0 0.35 em rgba(177, 227, 234, 1),
-3em -1em 0 0.3 em rgba(177, 227, 234, 1);
}
/* Бризки */
30% {
top: 90%;
box-shadow: 1.5 em 0 0 0.2 em rgba(252, 252, 255, 0.1),
-2em 0 0 0.15 em rgba(252, 252, 255, 0.1),
3em 0 0 0.2 em rgba(252, 252, 255, 0.1),
-2em 0 0 0.25 em rgba(252, 252, 255, 0.1),
0 0 0 0.2 em rgba(252, 252, 255, 0.1),
2.35 em 0 0 0.3 em rgba(252, 252, 255, 0.1),
-0.5 em 0 0 0.2 em rgba(252, 252, 255, 0.1),
1em 0 0 0.3 em rgba(252, 252, 255, 0.1),
-4em 0 0 0.4 em rgba(252, 252, 255, 0.1);
}
/* Переховування */
40%, 100% {
top: 95%;
background: rgba(255, 255, 255, 1);
box-shadow: 1.8 em 0.5 em 0 0.2 em rgba(255, 255, 255, 0),
-3em 0.5 em 0 0.1 em rgba(255, 255, 255, 0),
4em 0.5 em 0 0.1 em rgba(255, 255, 255, 0),
-3.5 em 0.5 em 0 0.1 em rgba(255, 255, 255, 0),
0 0 0 0.3 em rgba(255, 255, 215, 0),
2.45 em 0.5 em 0 0.1 em rgba(255, 255, 255, 0),
-0.8 em 0.5 em 0 0.2 em rgba(255, 255, 255, 0),
1.5 em 0.5 em 0 0.3 em rgba(255, 255, 255, 0),
-4.5 em 0.5 em 0 0.2 em rgba(255, 255, 255, 0);
}
}
/* Анімація водної поверхні */
@keyframes surface {
50% {
border-radius: 0 75% 0 75%;
opacity: 0.5;
height: 3.5 em;
}
}

Для отримання більш натуралістично анімації ось вам дві підказки:

Дивіться і аналізуйте довідкову інформацію – зображення, відео і т. д.

Поекспериментуйте з різними швидкостями переходів властивостей CSS і ключових кадрів.

Ще інформація про анімації і безумовно цікава стаття, стоїть вивчення – це Аварійний набір аніматора (The Animator’s Survival Kit) від Річарда Вільямса (Richard Williams).

Повернемося до наших баранів. В останньому прикладі у псевдокласу :before та ж ширина, що у його батьківського елементу. Щоб несподівано не виникла проблема переповнення, ми застосуємо значення «inherit».

ПРИКЛАД 2

Приклади анімації і переходів псевдоелемент

У цьому прикладі з допомогою переходу ми створимо ефект проведення мишею.

Розмітка

codrops

Тут є тільки контейнер і заголовок, щоб відокремити текст від всього іншого.

CSS

.circle {
background: rgb(255,255,255);
border-radius: 100%;
cursor: pointer;
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
transform: translateZ(0);
}
.circle h1 {
color: rgba(189, 185, 199,0);
font-family: ‘Lato’, sans-serif;
font-weight: 900;
font-size: 1.6 em;
line-height: 8.2 em;
text-align: center;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
user-select: none;
transition: color 0.8 s ease-in-out;
}
.circle:before,
.circle:after {
border-radius: 100%;
content:»»;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
box-shadow: inset 10.6 em 0 0 rgba(30, 140, 209, 0.2),
inset 0 10.6 em 0 rgba(30, 140, 209, 0.2),
inset -10.6 em 0 0 rgba(30, 140, 209, 0.2),
inset 0 -10.6 em 0 rgba(30, 140, 209, 0.2);
transition: box-shadow 0.75 s;
}
/* Ми обертаємо псевдоэлемент :after, щоб його край припав на кут, те ж саме можна було б зробити з допомогою тіні блоку box-shadow. */
.circle:after {
transform: rotate(45deg);
}
/* Застосування «pseudo-class + pseudo-element» не створює жодних проблем:) */
.circle:hover:before,
.circle:hover:after {
box-shadow: inset 0.86 em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.86 em 0 rgba(252, 150, 0, 0.5),
inset -0.86 em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.86 em 0 rgba(0, 150, 255, 0.5);
}
.circle:hover > h1 {
color: rgba(185, 185, 185,1);
}

Вам треба застосовувати за раз лише один колір, щоб уникнути непотрібного змішування кольорів при накладанні під час запуску ефекту проведення мишею.

ПРИКЛАД 3

Приклади анімації і переходів псевдоелемент

Як ми посміли б пройти повз обов’язкової анімації завантаження! Тут ідея полягає у змішуванні кольорів по мірі обертання. Це дуже просто!

Розмітка

Для розмітки ми застосуємо один-єдиний елемент.

CSS

.loading {
background: rgba(0, 50, 250, 0);
position: relative;
margin: 5em auto 0 auto;
width: 3em;
height: 3em;
animation-name:rotate;
}
.loading,
.loading:before,
.loading:after {
border-radius: 100%;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
.loading:before,
.loading:after {
content: «»;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.loading:before {
background: rgba(200, 250, 100, 0);
animation-name: ring;
}
.loading:after {
background: rgba(250, 0, 200, 0);
animation-name: ring2;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8 em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8 em 0 rgba(252, 150, 0, 0.5),
inset -0.8 em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8 em 0 rgba(0, 150, 255, 0.5);
}
/* Приховано */
85%, 100% {
/* 360 градусів х 10 */
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring {
0% {
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8 em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8 em 0 rgba(252, 150, 0, 0.5),
inset -0.8 em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8 em 0 rgba(0, 150, 255, 0.5);
}
/* Приховано */
75%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring2 {
0% {
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8 em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8 em 0 rgba(252, 150, 0, 0.5),
inset -0.8 em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8 em 0 rgba(0, 150, 255, 0.5);
}
/* Приховано */
65%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}

Це – чудовий приклад експериментування з тимчасовими інтервалами і швидкостями для отримання дійсно ефектною анімації.

ПРИКЛАД 4

Приклади анімації і переходів псевдоелемент

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

Розмітка

Для ока істоти ми застосуємо один елемент.

CSS

.pojoro {
background: rgba( 255, 255, 255, 1);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
border-radius: 100%;
/* box-shadow: змішаний колір, тіло, вії */
box-shadow: 0 0 0 0.2 em rgb(146,89,149),
0 0 0.1 em 0.55 em rgb(176,89,179),
inset 0 0.2 em 0 0 rgb(136,79,139);
/* ojo (очей) */
color: rgba( 40, 40, 40, 0.8);
line-height: 1.1 em;
padding-left: 0.18 em;
-webkit-font-smoothing: antialiased;
user-select: none;
/*юзабіліті, розташування і перехід */
cursor: pointer;
position: relative;
margin: 5em auto 0 auto;
width: 1em; height: 1em;
transform-origin: center;
transition: all 0.8 s ease-in-out;
/*Розділіть анімацію, щоб краще контролювати очей і тіло */
animation: eye 2.2 s ease-in-out infinite, body 1.15 s 1.8 s linear infinite;
}
/* Підніміть і змініть створення. */
.pojoro:hover {
transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}
/* Крила */
.pojoro:before,
.pojoro:after {
background: rgba(0,0,0,0);
border-radius: 100%;
content: «»;
/* display:none, приховайте крила */
display: none;
position: absolute;
width: 1em; height: 0.1 em;
-webkit-filter: blur(1px);
transition: all 0.2 s;
animation-duration: 0.2 s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.pojoro:before {
top: 25%; left: 1.45 em;
margin-left: -1em;
transform-origin: left;
transform: rotate(-60deg);
animation-name: wings;
}
.pojoro:after {
top: 25%; left: -2.2 em;
margin-left: 1em;
transform-origin: right;
transform: rotate(60deg);
animation-name: wings2;
}
.pojoro:hover:before,
.pojoro:hover:after {
background: rgba(100,100,100,0.8);
/* display:block, з’являються крила і починається анімація */
display: block;
margin-left: 0em;
width: 2em; height: 0.3 em;
}
@keyframes eye {
/* Рух ока */
5%, 10% {
line-height: 1.2 em;
padding-left: 0em;
}
15%, 20% {
line-height: 1.15 em;
padding-left: 0.4 em;
}
/* Рух вій */
25% {
box-shadow: 0 0 0 0.2 em rgb(146,89,149),
0 0 0.1 em 0.55 em rgb(166,89,169),
inset 0 1em 0 0 rgb(136,79,139);
}
23%, 27% {
box-shadow: 0 0 0 0.2 em rgb(146,89,149),
0 0 0.1 em 0.55 em rgb(166,89,169),
inset 0 0.2 em 0 0 rgb(136,79,139);
}
}
@keyframes body {
50% {
width: 1.4 em; height: 1.4 em;
}
}
@keyframes wings {
50% {
transform: rotate(65deg);
}
}
@keyframes wings2 {
50% {
transform: rotate(-65deg);
}
}

При проведенні мишею ми активуємо анімацію крил, а тіло починає підніматися. І це був останній приклад!

На закінчення скажу, що псевдоелементи – відмінна річ, і їх поєднання з анімацією і переходами дозволяє створювати забавні ефекти без застосування надмірної кількості розмітки і зображень. Сподіваюся на швидке розширення їх браузерної підтримки; а до цього моменту ми зможемо грати з ними і отримувати задоволення від цікавих технік. А що ви думаєте про це?

Сподіваюся, стаття виявиться корисною і послужить вам натхненником.