Animazioni CSS: introduzione ed esempi

Gli effetti animati più elementari nei CSS possono essere ottenuti attraverso proprietà come transform e transition . Tuttavia, la bozza di lavoro CSS Animations Level 1 fornisce un ambiente più complesso utilizzando l' animation e le proprietà @keyframes per ottenere effetti di animazione perpetui. Questo è meglio compreso attraverso un esempio definitivo.

Specificare le regole di animazione usando @keyframes

La regola @keyframes viene utilizzata per specificare il comportamento dell'animazione che desideriamo applicare a un identificatore di animazione nel layout di pagina. L'identificatore è specificato tramite animation-name o usando l' animation: name; abbreviazione.

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

In questo contesto, l'esempio sopra cambierà il background-color da bianco a nero per tutta la durata dell'animazione. from si riferisce all'inizio (0%) e to si riferisce alla fine (100%). Quindi, la regola può anche essere riscritta con valori percentuali.

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

Di per sé, questo non farà nulla a meno che non specifichiamo l'elemento che desideriamo animare. Inoltre, devi anche specificare animation-duration poiché il valore predefinito è 0.

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

Possiamo quindi chiamare il nostro contenitore usando un div e il risultato sarebbe questo:

In genere, la maggior parte delle animazioni CSS scritte in puro CSS utilizza un'abbreviazione perché salva la scrittura di più righe della logica dell'animazione. Pertanto, ecco un riferimento per i valori delle proprietà di animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

Ulteriori letture

Se desideri saperne di più sulle animazioni CSS in modo approfondito, ecco le mie risorse consigliate:

• Riferimento CSS di Codrops – Questo è un riferimento completo scritto e organizzato da Sara Soueidan (@SaraSoueidan) e contiene esempi approfonditi di come funzionano determinate proprietà CSS.
• Animazioni CSS MDN – Un'ampia introduzione in stile documentazione alle animazioni CSS nella pagina MDN Web Docs.
• Introduzione a cubic-bezier() – Un articolo approfondito scritto da Temani Afif (@ChallengesCss) per CSS-Tricks sull'utilizzo della proprietà cubic-bezier() per creare animazioni CSS avanzate.

Esempi di animazioni CSS

Il modo migliore per imparare qualsiasi cosa è attraverso gli esempi. La sezione seguente è interamente dedicata ai vari effetti ottenuti tramite le proprietà di animazione CSS.

Un'ultima cosa! Molte delle animazioni di esempio di seguito hanno un bel po' di codice ad esse associato, pertanto ho aggiunto un overflow di altezza massima a questo articolo per abilitare una barra di scorrimento. Puoi anche passare il mouse su ogni frammento di codice e copiarlo negli appunti per importarlo nel tuo editor di codice.

Onda

L'animazione dell'onda viene creata prima disegnando un percorso SVG per un modello d'onda e quindi assegnandogli un ID. Successivamente, specifichiamo quattro classi nth-child con variabili personalizzate animation-delay animation-duration . Ogni variabile rappresenta una singola onda all'interno dell'animazione e ogni onda può essere stilizzata in modo indipendente.

Il vantaggio di definire il pattern con SVG è che il codice diventa facilmente riutilizzabile.

Se osservi il percorso che abbiamo disegnato, specifichiamo quattro diversi livelli per l'onda (usando un asse personalizzato) e quindi facciamo riferimento #wave-pattern che abbiamo impostato per il percorso iniziale. Qui è dove puoi anche cambiare l'aspetto del colore di ogni onda.

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

Caricamento del testo

Questo effetto di caricamento è relativamente facile da implementare perché utilizza solo una manciata di pratiche proprietà di animazione. Innanzitutto, vuoi specificare content: attr() value che poi applichi all'elemento di testo che desideri animare. Successivamente, specifichi l'animazione stessa, che nel nostro caso è l' animation: loading 5s linear infinite; .

La durata dell'effetto di caricamento può essere modificata modificando la proprietà 5s. Infine, utilizziamo @keyframes per chiamare l'animazione di caricamento e cambiarne la larghezza da 0% a 100% in quel periodo di 5 secondi. Maggiore è il valore della durata dell'animazione, più lento sarà l'effetto di caricamento.

I casi d'uso specifici per un'animazione come questa sono effetti di transizione per i caricamenti di pagina, ma anche una soluzione affidabile per progetti applicativi quando non si vuole fare affidamento su alcuna libreria.

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

Onda di testo

Una delle prime cose che noterai di questa animazione è la sua fluidità . Questo è possibile perché utilizziamo la funzione calc() per calcolare matematicamente ogni transizione. Poiché scriviamo l'animazione in puro CSS, dobbiamo utilizzare più elementi span per specificare ogni lettera consecutiva nell'animazione.

Per quanto riguarda la modifica della profondità dell'onda, in primo luogo, è possibile modificare la durata da 3s a un numero minore o maggiore. Più alto significa che l'effetto dell'onda sarà più lento e viceversa. E, all'interno dei @keyframes puoi cambiare la specifica -24px per cambiare l'altezza dell'onda.

Più alto è il valore negativo, più pronunciato sarà l'effetto dell'onda.

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

Effetto Impulso / Ondulazione

Iniziamo creando un contenitore per il cerchio a cui desideriamo applicare l'effetto. Questo è specifico per la demo, ma puoi riutilizzare il codice per qualsiasi altro elemento della tua pagina. Dopo, creiamo una classe chiamata .circle che fungerà da effetto ondulato animato.

Due proprietà degne di nota che usiamo in questa classe sono l' opacity: 0.5; e animation: ease-out; . L'opacità è ciò che crea l'illusione di avere increspature/impulsi e la transizione di allentamento fa sì che quelle increspature escano dal contenitore originale.

Successivamente, prendiamo la nostra classe .circle e le applichiamo la proprietà nth-of-type() . Per questo esempio, utilizziamo 3 cerchi singoli che escono dal contenitore originale. All'interno delle chiamate dell'ennesimo tipo, applichiamo animation-delay con i valori di -0,5s;-1s;-1,5s. Maggiore è il valore negativo, maggiore sarà il tempo necessario per il rendering completo degli effetti.

Infine, applichiamo @keyframes alla nostra animazione a impulsi specificata. In questo esempio, utilizziamo la proprietà transform: scale() . Questo definisce la dimensione degli impulsi per ciascuna animazione. Più alto è il valore, più grandi appariranno le increspature in uscita.

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

Contatore (numeri)

La proprietà del contatore è facile da trascurare perché in genere si aggiungono manualmente i numeri a determinati elementi. Tuttavia, è utile quando si desidera eseguire assegnazioni nidificate approfondite a voci di menu o pagine di documentazione di grandi dimensioni.

Inoltre, puoi mettere insieme un contatore automatico per i titoli dei post del blog. Ad esempio, stai scrivendo una recensione su più strumenti. E, soprattutto, il bancone può essere personalizzato individualmente dandoti più libertà di design.

Ma, per questa demo, ci stiamo concentrando sull'utilizzo della proprietà counter per creare un effetto counter automatizzato. Quindi, scaviamo e capiamo come funziona. Per questo esempio, creiamo prima un contenitore che conterrà l'animazione del contatore. Puoi personalizzarlo come preferisci. Successivamente, creiamo la nostra classe .count-numbers che include la sintassi dell'animazione, in questo caso è l' animation: count-numbers 10s linear infinite forwards; .

Per scomporlo, specifichiamo il nome per la nostra animazione, impostiamo la durata su 10 secondi e impostiamo la direzione dell'animazione su normale perché non vogliamo che conti indietro da 10. Tuttavia, puoi impostarlo su alternati se desideri che anche il tuo contatore conti all'indietro.

Andando avanti, specifichiamo una nuova classe chiamata .count-numbers::prima della quale usiamo il nome del nostro contatore, in questo caso content: counter(count); . Questo è importante perché il passaggio successivo consiste nell'usare il counter-name per animare l'effetto tramite @keyframes .

L'ultimo passaggio è scrivere le nostre specifiche per l'animazione da renderizzare. Nella nostra demo, contiamo da 1 a 10, quindi specifichiamo il nostro valore @keyframes da 0% a 100% con incrementi del 10%. Ogni incremento contiene un'istruzione counter-increment che utilizza anche il nostro nome di counter: counter-increment: count 0; .

Quindi, allo 0% il nostro incremento è impostato su 0 e al 10% è impostato su 1 per proiettare l'effetto di un contatore.

Inoltre, prova a cambiare il content: counter(count); specificazione del contenuto: counter(count, upper-roman); e guarda cosa succede!

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

Palla che rimbalza

Iniziamo creando prima un contenitore per la nostra palla, in questo caso è .ball-container .

Successivamente, specifichiamo la dimensione della palla e lo stile del suo aspetto utilizzando una combinazione di colori di sfondo ed effetti ombra. Nella nostra demo, abbiamo optato per un effetto più luminoso, ma puoi modificarlo in base alle tue esigenze. E infine, specifichiamo l'animazione, in questo caso, impostiamo una durata su 5 secondi e applichiamo anche l' ease-in-out che significa che la transizione ha sia un inizio lento che una fine.

Dopo che la palla è stata estratta e l'animazione è stata impostata, possiamo scrivere le nostre regole @keyframes . Per ottenere l'effetto rimbalzo, utilizziamo transform: translatey(); con incrementi del 50%, quindi dallo 0% al 50% al 100%. L'enfasi è sul 50% perché qui impostiamo l'altezza del rimbalzo specificando transform: translatey(-50px); – il rimbalzo/galleggiante sarà di 50px di altezza (rispetto al contenitore). Più alto è il numero negativo, più alta sarà la palla che rimbalza.

Allo stesso modo, specificando un numero più piccolo si riduce la dimensione del rimbalzo.

L'ultima parte è aggiungere un'ombra, anche se puoi rimuoverla anche poiché non avrà alcun effetto sull'animazione della palla stessa. L'unica differenza con l'ombra è che utilizziamo la proprietà transform: scale() per ridimensionare l'ombra in un contesto 2D. Impostiamo i valori in base alla scala dell'effetto che desideriamo ottenere.

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

Testa o croce

Quello che mi piace di questa animazione è che possiamo impostare un raggio di rotazione incredibilmente preciso per ottenere un effetto che sembri che la moneta stia davvero lanciando. Quindi, per iniziare avrai bisogno di 2 immagini (sto usando SVG per questa demo, ma le foto normali funzionano altrettanto bene. Assicurati solo di applicare la classe corretta a ciascuna immagine.) e impostale su opacity: 0; . Lo impostiamo su 0 perché in seguito utilizziamo @keyframes per modificare la loro opacità in modo che le immagini entrino nella vista in determinate posizioni durante l'animazione.

La classe .image-container viene utilizzata per specificare le dimensioni delle immagini all'interno della moneta. Assicurati di specificarlo anche per le immagini reali, come mostrato nello snippet di seguito. Successivamente, specifichiamo .coin-style che è la parte esterna (la moneta stessa). Tecnicamente, puoi impostarlo su trasparente ma per motivi di demo, lo rendiamo visibile.

Il concetto principale per la classe .coin-style è il modo in cui aggiungiamo l'animazione, che in questo caso è: animazione: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; .

Il punto di interesse è la specifica cubic-bezier() , che ci fornisce l'effetto della curva rotante per il contenitore delle monete. Questo è praticamente impossibile da scrivere da soli, quindi la mia raccomandazione è di utilizzare qualsiasi strumento generatore per rendere l'effetto curva desiderato.

Infine, all'interno dei nostri @keyframes applichiamo la funzione scaleX() per ridimensionare l'aspetto della moneta in base x-axis . Anche la minima modifica ai valori forniti (in questa demo) modificherà il modo in cui appare l'effetto "flip".

Penso che l'implementazione di seguito sia il più vicino possibile alla perfezione, ma forse puoi fare di meglio!

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

Slide-In

Per far funzionare questa animazione, utilizziamo l' animation: ease-out; funzione in combinazione con un valore di posizione negativo all'interno @keyframes . Quindi, in questo esempio specifichiamo 0% {opacity: 0;left: -700px;} che rende il nostro elemento slide-in invisibile all'inizio, ma anche posizionato a 700px fuori dal contenitore.

Successivamente, specifichiamo 100% {opacity: 1;left: 0;} che quando la nostra animazione sarà terminata (l'abbiamo impostata su 2 secondi) restituirà la visibilità normale e riporterà il nostro elemento alla sua posizione relativa.

Una cosa interessante da notare è che questo effetto funziona in tutte le direzioni.

Se vuoi cambiare l'effetto slide-in in modo che appaia dal lato destro, devi cambiare il left:; valori a destra:; e viceversa per posizioni come alto e basso. Puoi anche ritardare l'animazione regolando il tempo necessario per l'inserimento dell'elemento.

Un valore più alto rallenterà l'animazione.

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

Effetto blob

Prima di tutto, che diavolo è un Blob? Come ha affermato Ian Latchmansingh, “Il Blob è una forma amorfa, pseudo-organica, comunemente usata per ancorare visivamente le pagine di destinazione. Di solito funge da maschera o sfondo per un'illustrazione. Circa il 90% delle volte il Blob è riempito con un gradiente e si trova sullo strato più basso di un disegno. . È certamente uno dei modelli più comuni nel web design moderno. Ma come lo animiamo?

Iniziamo creando un contenitore effetto blob e specifichiamo anche 3 singoli elementi span all'interno del contenitore. Lo facciamo perché in realtà "disegniamo" noi stessi il blob usando una combinazione di proprietà del bordo e del raggio del bordo.

Per ottenere l'effetto vario, usiamo nth-child per modellare ogni elemento individualmente. Se vuoi divertirti con esso, sentiti libero di cambiare le proprietà della percentuale per regolare l'aspetto del blob.

L'animazione stessa si ottiene usando la proprietà transform: rotate() all'interno di una specifica @keyframes . Lo impostiamo da 0 a 360 gradi perché questo ci dà un effetto perpetuo. La sovrapposizione del colore viene eseguita tramite :hover e ci consente di impostare un colore di sfondo personalizzato. Inoltre, creiamo anche un contenitore separato all'interno del BLOB stesso. Ciò ti dà la possibilità di modellare singole parti del layout di pagina per avere questo specifico effetto di animazione.

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

Cambio di testo

Gli effetti di animazione sono in genere riservati ai progetti web creativi. E in questo caso, questo effetto di commutazione del testo contribuirà a creare una prima impressione forte per i visitatori del tuo sito. Ideale per l'introduzione di intestazioni o, se personalizzato, può essere utilizzato per mostrare le caratteristiche del prodotto, ecc.

La prima cosa che facciamo è creare un contenitore per l'effetto reale. Successivamente, specifichiamo una nuova classe div che conterrà la logica di animazione. Nel nostro caso, utilizziamo una lunghezza di animazione di 8 secondi, combinata con 3 specifiche animation-delay separate.

Il ritardo viene utilizzato per determinare quando una parola specifica verrà visualizzata dopo aver aggiunto la nostra logica @keyframes .

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

Evidenzia al passaggio del mouse

È vero che questo effetto specifico non utilizza proprietà di animazione concrete. Tuttavia, l'uso di attr() e della funzione var() dovrebbe essere abbastanza stimolante per provare a personalizzare ulteriormente questo effetto.

Se osservi la specifica ul li a::before – usiamo attr() per specificare a quale elemento desideriamo attribuire l'effetto. Inoltre, aggiungiamo una variabile chiamata –clr che usi per impostare un colore personalizzato per ogni elemento a cui desideri applicare l'effetto al passaggio del mouse.

Per questo esempio, abbiamo anche aggiunto la proprietà border-right per indicare quale colore usiamo per ciascuno degli elementi. Puoi rimuoverlo e l'effetto continuerà a funzionare.

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }