Анимация с CSS трансформации
Това е последният урок от поредицата Анимация с CSS трансформации. Надявам се, че сте изучили предишните уроци и сте наясно, че CSS трансформациите могат много да улеснят създаването на определени ефекти в сайта. В същото време всичко е доста просто, защото анимацията изисква само няколко реда във файла със стилове. В тази статия ще разгледаме функциите за синхронизация и как можете да повлияете на един елемент чрез друг.
Примерите ще работят правилно в браузърите Firefox, Chrome, Safari и Internet Explorer 10.
Също така напомняне, чеанимациите работят само при задържане на мишката.
Днес ще отидем по-далеч и ще разгледаме функциите за синхронизация, както и как можете да "повлияете" на един елемент, като задържите курсора на мишката върху друг елемент.
Функции за синхронизация
В този пример ще разгледаме 4 различни прехода с 4 различни функции за време.
Същността на тази анимация е, че при задържане синият блок се обръща, променя цвета си и се измества в долния десен ъгъл:
Няма нищо необичайно в оформлението на блоковете в HTML:
Но при CSS трябва да спрете малко и да погледнете по-отблизо:
На пръв поглед този имот може да ви се стори много сложен. Но нека го разделим на 4 части, както е на изображението по-горе.
Освен това това свойство е съкратена форма на следните свойства:
какво направихме И ето какво: ние написахме всички части от всеки параметър (имаме четири от тях на изображението по-горе) в ред в свойствата на conversion-property, conversion-duration, conversion-delay и conversion-timing-function.
И сега нека видим какъв вид свойства са тези, в които пренаписахме всички тезинастроики:
- transition-property - указва свойството, което ще се промени по време на трансформацията. В нашия случай променяме позицията на блока със свойстваleft иtop, сbackground променяме цвета на блока и накрая сtransform обръщаме блока (но уточняваме това малко по-късно, но тук само показваме, че блокът ще бъде трансформиран).
- transition-duration - тук задаваме продължителността на анимацията.
- transition-delay - посочете времето, след което се извършва трансформацията. Например, блокът в нашия пример се завърта само 1 секунда, след като блокът е започнал да се движи.
- transition-timing-function - тук трябва да зададете функции за анимация. Има много какво да се пише за тези параметри, но ще кажа само, че всеки от нашите параметри (ease,ease-out,ease-in,linear иease-in-out ) анимация се случва с различна скорост.
Как да повлияем на елемент чрез елемент
Надявам се, че разбрахте как направихме анимацията и комбинирахме няколко свойства едновременно. Затова продължаваме напред.
Заглавието на тази част от статията изглежда малко сложно, не мислите ли? 🙂 . Но въпросът е, че когато задържим курсора на мишката над един елемент, можем да „повлияем“ по някакъв начин на друг елемент.
Когато задържите курсора на мишката върху първия блок, първият блок се увеличава, а вторият се търкаля надясно, превръщайки се в кръг. Когато задържите курсора над втория блок, той се увеличава по ширина.
Проверете го сами по-долу:
За да не обидим онези, чиито браузъри не поддържат CSS трансформации:
В HTML два блока са на едно ниво:
В CSS има интересен знак, койтони позволява да правим това, което сме възнамерявали:
Обърнете внимание на знака "+ ", с който можем да "свържем" два елемента на страницата.
С този урок искам да завърша серията Анимация с CSS трансформации. Не забравяйте да преминете през предишните уроци (връзките са в началото на статията). Досега вече сте запознати с това как можете да правите анимация с помощта на CSS трансформации. Какво ще можете да направите по-нататък зависи само от това колко време ще отделите на практика, когато изучавате CSS transforms. В края на краищата, с помощта на трансформации, можете да направите наистина красиви и оригинални ефекти на сайта.
В бъдеще ще пиша за CSS анимации. Но тази анимация ще бъде много по-сложна от тази, която гледахме в тези уроци!