{"id":255665,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/dai-vita-alle-tue-pagine-web-con-animazioni-e-transizioni-css\/"},"modified":"2023-08-13T09:34:00","modified_gmt":"2023-08-13T06:34:00","slug":"dai-vita-alle-tue-pagine-web-con-animazioni-e-transizioni-css","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/dai-vita-alle-tue-pagine-web-con-animazioni-e-transizioni-css\/","title":{"rendered":"Dai vita alle tue pagine Web con animazioni e transizioni CSS"},"content":{"rendered":"

\n I design dei siti web sono in continua evoluzione. Dal design reattivo, alla bella tipografia, agli schemi di codifica dei colori perfetti, alle illustrazioni, i creatori di siti Web escogitano ogni giorno nuove idee e design.\n<\/p>\n

\n Gli utenti al giorno d'oggi hanno grandi aspettative sulle interfacce utente a causa di tali contenuti di alta qualit\u00e0 disponibili su Internet. Man mano che le interfacce dei siti web si evolvono, lo \u00e8 anche la tecnologia che le sta dietro. Uno dei principali componenti responsabili del miglioramento dell'interfaccia del sito Web \u00e8 il CSS<\/strong>.\n<\/p>\n

\n I CSS o Cascading Style Sheets sono responsabili di rendere i siti molto interattivi definendone lo stile, il layout e il design. L'ultimo standard per CSS, ovvero CSS3, ha introdotto il concetto di animazioni<\/strong> e trasformazioni<\/strong> che migliorano l'esperienza dell'utente aggiungendo ulteriore profondit\u00e0 all'interfaccia utente. Con le animazioni e le transizioni CSS, puoi raccontare storie, creare effetti sontuosi e rendere l'interazione dell'utente con il tuo sito web molto efficace e significativa.\n<\/p>\n

\n Un'animazione \u00e8 solo una simulazione del movimento che viene creata visualizzando una serie di oggetti come immagini uno dopo l'altro. La transizione, d'altra parte, \u00e8 fondamentalmente un processo in cui un oggetto cambia da uno stato all'altro. Ma quando parliamo di animazioni web ci sono fondamentalmente tre tipi: animazioni CSS<\/strong> o animazioni di fotogrammi chiave, transizioni CSS<\/strong> e animazioni JavaScript<\/strong>.\n<\/p>\n

\n Animazioni CSS\n<\/p>\n

\n Per creare animazioni in CSS abbiamo bisogno di modificare le propriet\u00e0 CSS di un elemento come un'immagine o un testo, per un certo periodo di tempo. Possiamo modificare le propriet\u00e0 degli elementi tutte le volte che vogliamo e possiamo anche impostare la durata dell'animazione.\n<\/p>\n

\n Specificando @keyframes
\n<\/h5>\n

\n Le animazioni CSS sono definite bit con fotogrammi chiave. Questi fotogrammi chiave sono i punti intermedi dell'animazione. Tutte le animazioni CSS sono specificate sotto la regola @keyframes. Questi fotogrammi chiave specificano cosa succede all'elemento in un particolare momento, cio\u00e8\n<\/p>\n

    \n
  • quali propriet\u00e0 stanno cambiando\n <\/li>\n
  • quando l'elemento si anima\n <\/li>\n
  • come si anima l'elemento\n <\/li>\n<\/ul>\n

    \n Puoi definire il tuo fotogramma chiave come:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Qui ‘a' e ‘from' specificano l'inizio e la fine dell'animazione. Possiamo anche specificare animazioni per momenti intermedi di tempo tra l'inizio e la fine in questo modo:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Qui 0% rappresenta l'inizio dell'animazione, 100% rappresenta la fine dell'animazione e 50% indica il cambiamento tra l'inizio e la fine. Ma come diciamo al browser per quanto tempo deve svolgersi l'animazione? Lo facciamo con l'aiuto di alcune propriet\u00e0 dell'animazione<\/strong>. Queste propriet\u00e0 di animazione sono associate all'elemento da animare. Per esempio:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Qui l'elemento potrebbe essere qualsiasi tag HTML come div, span, img, p ecc. ed style_property<\/code>\u00e8 qualsiasi propriet\u00e0 di stile CSS come background_color, width, height ecc. Osserviamo ora alcune propriet\u00e0 dell'animazione in dettaglio.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: i fotogrammi chiave vengono utilizzati per specificare il codice di animazione come discusso sopra.\n  <\/li>\n
    2. \n    animation-name<\/strong>: il nome specificato con @keyframes \u00e8 il nome dell'animazione. Questo nome viene utilizzato per fare riferimento ai fotogrammi chiave con l'elemento da animare.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: viene utilizzato per specificare la durata dell'animazione in secondi o millisecondi. Ad esempio, se lo impostiamo a 5 secondi, l'animazione verr\u00e0 eseguita solo per 5 secondi. Se non impostiamo questa propriet\u00e0, l'animazione non verr\u00e0 eseguita poich\u00e9 il suo valore predefinito \u00e8 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: possiamo ritardare l'inizio dell'animazione specificando il tempo di ritardo dell'animazione. Ad esempio, se desideri avviare l'animazione 5 secondi dopo il caricamento della pagina nel browser, imposta animation-delay su 5s.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Possiamo dire al browser se un'animazione si muove nella direzione opposta o si alternano cicli con questa propriet\u00e0. Ad esempio, se desideri che l'animazione venga eseguita dall'inizio alla fine, imposta il valore di animation-duration su ‘normal'. Se vuoi che venga eseguito dall'inizio alla fine, imposta semplicemente il valore su “reverse”.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: possiamo specificare lo stile dell'elemento quando l'animazione non viene riprodotta con questa modalit\u00e0, ad esempio quando l'animazione \u00e8 ritardata o terminata, quale dovrebbe essere lo stile dell'elemento.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: il numero di volte in cui un'animazione pu\u00f2 essere riprodotta \u00e8 rappresentato da questa propriet\u00e0. Ad esempio, se vuoi riprodurre l'animazione una volta, impostala su 1 o se desideri che l'animazione venga riprodotta per sempre, impostala semplicemente su “infinito”.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Questa propriet\u00e0 \u00e8 usata per specificare la curva di velocit\u00e0 dell'animazione come lineare, accelerazione o de-accelerazione.\n  <\/li>\n
    9. \n    Animazione<\/strong>: \u00e8 la propriet\u00e0 abbreviata per l'impostazione di tutte le propriet\u00e0 dell'animazione.\n  <\/li>\n<\/ol>\n
      \n  Ad esempio, puoi animare un oggetto che rimbalza con il seguente frammento di codice. Si noti come qui sia stata utilizzata la notazione abbreviata per l'animazione.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Transizioni
      \n<\/h3>\n
      \n  Le transizioni CSS vengono applicate alle propriet\u00e0 degli elementi per una certa durata di tempo in base a determinate funzioni di temporizzazione<\/strong>, note anche come funzioni di andamento. Per funzione di temporizzazione intendiamo una funzione che cambier\u00e0 le propriet\u00e0 degli elementi da uno stato all'altro come la progressione lineare, l'accelerazione o la de-accelerazione. Potresti aver notato che un'immagine scorre o si trasforma in un'altra immagine al passaggio del mouse o un suono viene riprodotto al clic del mouse. Questi sono tutti effetti di transizione che possono rendere interattivo un sito web.\n<\/p>\n
      \n  Le funzioni di interpolazione<\/strong> sono importanti per creare transizioni. Specificano come cambieranno le propriet\u00e0. Possono anche alterare la velocit\u00e0 con cui il valore delle propriet\u00e0 cambia dal punto iniziale al punto finale di una transizione. Puoi applicare le transizioni nel modo seguente:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Qui element specifica l'elemento HTML che vuoi trasformare come div, H1, img ecc. style_property \u00e8 lo stile CSS applicato a quell'elemento. Vediamo ora alcune propriet\u00e0 di transizione<\/strong> :\n<\/p>\n