Разкрасете уебсайта си с помощта на тези съвети и трикове за анимация.

Анимациите и преходите са важна част от уеб дизайна. Добавянето на фини анимации към вашата уеб страница ще я направи по-ангажираща. Прости анимации като анимирани икони, кинетична типография и анимирани лога могат да помогнат за подобряване на потребителското изживяване. Научете пет страхотни трика за анимация, които могат да ви помогнат да оживите уебсайта си.

1. Трансформиране на елемент при задържане

Една често срещана дизайнерска практика е да има елемент, който се мащабира, когато се взаимодейства с него. Например, може да искате да преведете бутоните малко нагоре, когато някой задържи курсора на мишката върху тях. Можете да постигнете това с помощта на CSS трансформирам Имот.

Ако приемем, че имате бутон:

<бутон>
 Щракни върху мен
бутон>

Стилизирахте тялото на документа, както и бутона:

/* Подравнява бутона към центъра на страницата */
тяло {
дисплей: flex;
височина: 100vh;
подравняване на елементи: център;
justify-content





instagram viewer

: център;
Цвят на фона: черен;
}
/* Стилизира бутона */
бутон {
подплата: 1ем 2ем;
заден план: син;
граница: 0; 
цвят: бяло;
граница-радиус: 0.25rem;
курсор: показалец;
размер на шрифта: 2рем;
преход: трансформирам 500Госпожица;
}
/* Състояния на задържане */
бутон:задръжте,
бутон:фокус {
трансформирам: translateY(0.75rem) 500Госпожица;
}

С последния блок вие задавате състояния на задържане и фокус върху бутона. И в двете състояния премествате бутона по оста Y с 0,75 rem. Бутонът ще изглежда така:

Когато задържите курсора на мишката върху бутона, той се движи нагоре. Преходът отнема половин секунда (500 ms), за да завърши. Това е шаблон, който можете да приложите не само върху вашите бутони, но и върху други елементи (напр. изображения).

2. Деклариране на множество ключови кадри с една декларация

Друг често срещан модел в CSS анимациите е повтарянето на една и съща стойност многократно. Това може да е конкретен цвят, размер или ориентация. Можете да постигнете това, като използвате CSS анимации на ключови кадри чрез деклариране на множество ключови кадри с една декларация.

Помислете за бутона, който създадохте в предишния раздел. Може би искате да повторите няколко фонови цвята, когато щракнете върху бутона. Но също така искате да преминете през един и същи цвят на различни етапи от анимацията. Нека да видим как да постигнем това в код.

Първо, искате да анимирате бутона само при щракване. Така че бихте създали a script.js файл, вътре в който имате достъп до бутона и превключвате клас върху бутона, когато се щракне върху него:

конст бутон = документ.querySelector("бутон")
button.addEventListener("клик", (e) => {
 button.classList.toggle('време за купон')
})

Използвахме querySelector за достъп до бутона от уеб страницата. За да научите повече за преминаването на DOM, прочетете нашата публикация на как да преминете през DOM с помощта на JavaScript.

The време за купон клас активира анимация със заглавие партия:

.време за купон {
анимация: партия 2000Госпожицабезкраен;
}

За анимацията искате да започнете с червено и да преминете към жълто при 25%. След това ще се върнете към червено при 50%, преди да се върнете към жълто при 75%. И накрая, при 100%, ще се задоволите с тъмно син цвят:

@ключови рамки партия {
 0%, 50% {
Цвят на фона: червен;
 } 
 25%, 75% {
Цвят на фона: жълто;
 }
 100% {
Цвят на фона: hsl(200, 72%, 35%);
 }
}

Този подход е доста полезен за редуване на цветове върху базиран на цвят фон. Тъй като можете да повтаряте множество ключови кадри в една променлива, става супер лесно да използвате едно и също свойство на различни етапи от вашата анимация.

3. Използване на @property за анимиране на персонализирани свойства

Както може би вече знаете, не всички свойства в CSS могат да бъдат анимирани. Официалният Документация на Mozilla поддържа актуализиран запис на всички анимирани CSS свойства. Ако искате да анимирате неанимируемо свойство, тогава най-доброто ви решение би било да използвате @Имот директива.

Започнете, като промените цвета на фона на вашия бутон на линеен градиент:

бутон {
 // другоCSS
заден план: линеен градиент(90град, син, зелено);
 // другоCSS
}

Ето изхода:

Често бихте искали да анимирате цветовия градиент на бутона. Въпреки че има трикове, които можете да използвате, за да преместите своя градиент, всъщност не можете да го анимирате. Това е така, защото заден план (както и фоново изображение) не е анимируемо свойство. Това е където @Имот влиза.

The @Имот директива ви позволява да регистрирате персонализирани свойства. Когато използвате @Имот, трябва да му предоставите три стойности, а именно синтаксис, наследява, и първоначална стойност:

@Имот --цвят-1 {
синтаксис: "<цвят>";
наследява: вярно;
първоначална стойност: червен;
}
@Имот --цвят-2 {
синтаксис: "<цвят>";
наследява: вярно;
първоначална стойност: син;
}

Първото е началното свойство, докато второто е целевото свойство. Сега, вместо да прехвърлите фоново изображение (което не можете да прехвърлите), бихте прехвърлили от --цвят-1 да се --цвят-2 (вашите персонализирани свойства) за една секунда:

бутон {
преход: --цвят-1 1000Госпожица, --цвят-2 1000Госпожица;
}

Тази техника е полезна, защото можете да добавите и други персонализации. Например добавяте забавяне, за да му осигурите по-плавно изживяване. Възможностите са безкрайни.

4. Използване на отрицателни забавяния на анимацията

Закъсненията на анимацията са от решаващо значение за създаването на плавни анимации. Нека видим пример за това в действие. В тази част добавете a див елемент с 15 точки отгоре на бутона:

<дивклас="точки">
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
<дивклас="точка">див>
див>

Ето някои основни стилове за преобразяване на всяко дете див в точка:

.точки {
дисплей: flex;
празнина: .5rem;
margin-bottom: 20px;
}
.точка {
ширина: 10px;
съотношение: 1;
Цвят на фона: червен;
граница-радиус: 50%;
}

Тук използваме Flexbox, за да поставим точките в хоризонтална линия. За да се потопите дълбоко във Flexbox, можете да проверите нашия Урок за CSS Flexbox.

Вътре script.js, добавете кода, който задейства анимацията на точките. Вие превключвате на танцувам клас по точките:

button.addEventListener("клик", (e) => {
 button.classList.toggle('време за купон')
// Нов код
 dots.forEach((точка) => {
 dot.classList.toggle("танц")
 })
})

Класът по танци активира анимация със заглавие издигам се:

.точка.танцувайте {
анимация: издигам се 2000Госпожицабезкраенредуват се;
}

Що се отнася до анимацията, просто преместете точките -100px по оста Y:

@ключови рамки издигам се {
 100% {
трансформирам: translateY(-100px)
 }
}

Сега е време да направим нещо интересно. Вместо точките да се издигат едновременно, искате да анимирате точките да текат като вълна. За да постигнете това, трябва да добавите анимация-закъснение към точките и увеличете всяка точка със 100ms:

.точка:nth-child (1) {
анимация-закъснение: 100Госпожица;
}
.точка:nth-child (2) {
анимация-закъснение: 200Госпожица;
}
.точка:nth-child (3) {
анимация-закъснение: 300Госпожица;
}
.точка:nth-child (4) {
анимация-закъснение: 400Госпожица;
}
/* Продължете да правите, докато стигнете до 15-та точка */

Това създава елегантна анимация, при която точките се движат нагоре и надолу във вълнообразна форма. Следното изображение улавя точките в средата на анимацията:

Имайте предвид, че това може да бъде проблематично, което ни води до петия съвет.

5. Използвайте prefers-reduced-motion, за да активирате предпочитанията

Винаги имайте предвид, че много хора не харесват анимации, базирани на движение. Всъщност повечето потребители имат предпочитания в браузъра, които могат да изключат движението. Движението може да разсее сетивата и в тежки случаи да доведе до гадене.

За щастие можете лесно да се погрижите за това, като обвиете анимацията си в a без предпочитания медийна заявка така:

@медия(предпочита намалено движение: без предпочитание) {
.точка.танцувайте {
анимация: издигам се 2000Госпожицабезкраенредуват се;
 }
}

Сега, ако трябваше да активирате предпочита-намалено-движение във вашия браузър, тогава анимацията няма да се стартира.

Научете повече CSS съвети и трикове

CSS е пълен със страхотни хакове, които надхвърлят анимациите и преходите. Например, има съвети и трикове, за да направите цялото си оформление елегантно и отзивчиво. Практиките могат да ви помогнат да направите уебсайта си по-ангажиращ, достъпен и приятен за сърфиране. Ако искате да бъдете най-добрият един процент CSS разработчик, тогава наличието на няколко трика в ръкава ви помага много.