CSS átmeneti példák - Az egérmutató animációjának használata, az átlátszatlanság módosítása és egyebek

Programozás

Ha olyan webes technológiákkal dolgozik, mint a CSS, a HTML és a JavaScript, fontos, hogy rendelkezzen alapvető ismeretekkel a CSS animációkról és átmenetekről.

Ebben a cikkben megtanuljuk, hogyan készítsünk néhány alapvető átmeneti animációt CSS használatával.

Hogyan animálhatunk egy elemet az alapvető átmenettel az egérrel

Ebben a példában megváltoztatjuk az elem átlátszatlanságát, amikor a felhasználó az elem fölé viszi az egeret.

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

Ez egy egyszerű átmenet, amely kiváltható, amikor az elem felett lebegünk. Több, egyszerre futó átmenetet is felvehetünk.

Adjunk hozzá egy skála transzformációs tulajdonságot, hogy skála átmenetet adjunk az elemhez.

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

De az átmenet nem tűnik zökkenőmentesnek, mert nem határoztuk meg az átmenet időtartamát, és nem használtunk időzítési funkciót.  

Ha hozzáadjuk a transitiontulajdonságot, akkor az elem gördülékenyebben mozog.

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

Bontjuk le, hogyan működik az átmenet tulajdonság:

 transition: 500ms linear;
  • 500ms: az átmenet időtartama milliszekundumban
  • linear: az időzítési függvény
div { transition:    ; }

Az alábbihoz hasonló további lehetőségeket adhatunk hozzá (példák az MDN-től):

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

Tehát mit csinál ez a kód?

  • átmeneti tulajdonság: az animálni kívánt ingatlan. Ez lehet bármilyen CSS hasonló elem background, height, translateY, translateX, és így tovább.
  • átmenet-időtartam: az átmenet időtartama
  • átmenet-késleltetés: az átmenet megkezdése előtti késés

Itt többet megtudhat transitiona CSS különböző felhasználási módjairól .

Hogyan lehet interaktívabbá tenni az átmeneteket az animációs tulajdonság és a kulcsképek használatával

A CSS átmenetekkel többet tehetünk, hogy ez az animáció kreatívabb és interaktívabb legyen.

Elem áthelyezése kulcsképekkel

Nézzünk meg egy példát, ahol az elem az A pontról a B pontra mozog. A translateX és a translateY függvényeket fogjuk használni.

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

És ezt kapjuk:

Ezúttal olyan új tulajdonságokat használtunk, mint az animáció és a kulcsképek. A animationtulajdonság segítségével meghatároztuk az animáció nevét és időtartamát, a kulcsképek pedig leírják, hogyan kell az elemnek mozognia.

 animation: moveToRight 2s ease-in-out;

Itt neveztem el az animációt moveToRight- de tetszőleges nevet használhatsz. Az időtartam 2s, és ease-in-outegy időzítési funkciót.

Vannak más időzítési funkciókat használhatja, mint a ease-in, linear, ease-outamely alapvetően, hogy az animáció gördülékenyebb. Itt többet tudhat meg az időzítési funkciókról.

@keyframesfelveszi az animáció nevét. Ebben az esetben az moveToRight.

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

keyframesaz animációt többszörös lépésekben hajtja végre. A fenti példa egy százalékot használ az átmenetek tartományának vagy sorrendjének ábrázolására. Használhatnánk a fromés tomódszereket is. mint lent "

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

from az animáció kiindulópontját vagy első lépését jelenti.

to a végrehajtandó animáció végpontja vagy utolsó lépése.

Bizonyos esetekben érdemes százalékot használni. Tegyük fel például, hogy kettőnél több átmenetet szeretne hozzáadni, amelyek egymás után kerülnek végrehajtásra, például a következők:

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

Kreatívabbak lehetünk és egyszerre sok tulajdonságot animálhatunk, például a következő példában:

Itt játszhat a tulajdonságokkal és az animációs technikákkal a homokozóban:

Rengeteg további dolgot tehetünk a kulcsképekkel. Először tegyünk további átmeneteket animációnkba.

Hogyan animálhatunk további tulajdonságokat és hogyan vehetjük fel őket az átmenetbe?

Ezúttal animáljuk a hátteret, és az elemet négyzet alakú mintára mozgatjuk. Az animációt örökre futtatjuk, a infinitetulajdonságot időzítési funkcióként használva .

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

Bontjuk le. Először hozzáadjuk infinite, hogy az animáció örökre futhasson.

animation: moveToLeft 5s linear infinite;

És akkor az animációt négy lépésre osztottuk. Minden lépésnél egy másik átmenetet futtatunk, és az összes animáció sorrendben fog futni.

  • 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.

Miután megtanulta a CSS animációk alapjait, érdemes túllépnie és összetettebb dolgokat készítenie, amelyek felhasználói interakciót igényelnek. Ehhez használhatja a JavaScript-et vagy bármilyen külső animációs könyvtárat.

Helló, a nevem Said Hayani. Az Subsi.io-t azért hoztam létre, hogy segítsem az alkotókat, bloggereket és influencereket, hogy hírleveleken keresztül növeljék közönségüket.