Примери за преход на CSS - Как да използваме анимация при задържане, промяна на непрозрачността и др

Ако работите с уеб технологии като CSS, HTML и JavaScript, важно е да имате някои основни познания за CSS анимациите и преходите.

В тази статия ще научим как да правим някои основни анимации за преход с помощта на CSS.

Как да анимирате елемент с основен преход при задържане

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

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

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

Нека добавим свойство за преобразуване на мащаба, за да добавим преход към мащаб към елемента.

 .elem:hover { transform: scale(1.1); }

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

Ако добавим transitionсвойството, това ще накара елемента да се движи по-плавно.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Нека разбием как работи свойството на прехода:

 transition: 500ms linear;
  • 500ms: продължителността на прехода в милисекунди
  • linear: функция за синхронизиране
div { transition:    ; }

Можем да добавим още опции като по-долу (примери от MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

И така, какво прави този код?

  • переход-свойство: свойството, което искате да анимирате. Тя може да бъде всеки елемент CSS като background, height, translateY, translateX, и така нататък.
  • продължителност на прехода: продължителността на прехода
  • закъснение на прехода: закъснението преди началото на прехода

Можете да научите повече за различните приложения на transitionCSS тук.

Как да направим преходите по-интерактивни, използвайки анимационното свойство и ключовите кадри

Можем да направим повече с CSS преходи, за да направим тази анимация по-креативна и интерактивна.

Как да преместите елемент с ключови кадри

Нека разгледаме пример, при който елементът се премества от точка А в точка Б. Ще използваме translateX и translateY.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

И ето какво получаваме:

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

 animation: moveToRight 2s ease-in-out;

Тук нарекох анимацията moveToRight- но можете да използвате произволно име, което ви харесва. Продължителността е 2sи ease-in-outе функция за синхронизиране.

Има и други функции за времето можете да използвате, като ease-in, linear, ease-outкоето по същество правят анимация по-гладко. Можете да научите повече за функциите за синхронизиране тук.

@keyframesприема името на анимацията. В този случай е така moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesще изпълни анимацията в няколко стъпки. Примерът по-горе използва процент, за да представи диапазона или реда на преходите. Бихме могли да използваме fromи toметодите. като по-долу "

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from представлява началната точка или първата стъпка от анимацията.

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

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

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Можем да бъдем по-креативни и да анимираме много свойства едновременно, както в следващия пример:

Можете да си поиграете със свойства и техники за анимация в пясъчника тук:

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

Как да анимирате повече свойства и да ги включите в прехода

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

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Нека да го разделим. Първо добавяме, за infiniteда накараме анимацията да работи завинаги.

animation: moveToLeft 5s linear infinite;

И тогава разделяме анимацията на четири стъпки. На всяка стъпка ще стартираме различен преход и цялата анимация ще се изпълнява в последователност.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

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

Здравейте, казвам се Саид Хаяни. Създадох subsbi.io, за да помогна на създателите, блогърите и инфлуенсърите да разширят своята аудитория чрез бюлетин.