Cerca
Generic filters
Frase esatta
Cerca nel titolo
Cerca nel contenuto
Filter by Custom Post Type
Filter by Categorie
Quick Snippets
Guide e Tutorial Joomla
Guide e Tutorial Wordpress
Notizie
Programmazione Web
Trucchi e Guide Apple Mac OS
Filtra per Tags
Seleziona / Seleziona tutti
acf
action
aggiornamento joomla
aggiornamento virtuemart
aggiungere campi
akeeba
amazon s3
amazon web services
angularjs
apache
aruba
autopost
aws
backup
backup buddy
blocksit.js
bootstrap
bordi arrotondati
cache
caching
campi personalizzati
captcha recaptcha
cf7
chronoforms
cloud
compressione file
compressione immagini
conditional fields
contact form 7
countdown
cpt
css
css framework
css3
custom post type
custom registration
data di nascita
debug
disegni
downgrade
draw
ec2
endpoints
ergonet
font awesome
font custom
fontweb
form
front end
ftp
functions.php
funzioni
glyphicons
google
hook
hosting
hosts
html
html5
image optim
javascript
joomla
joomla api
joomla development
joomla festival
joomla lombardia
joomla update
jquery
k2
lightbox
login
mac
mac os
mamp
metabox
mobile friendly
multilingua
mysql
news
ottimizzazione
ottimizzazione immagini
override
password
pdf
php
plugin
qtranslate
redis
registrazione
registrazione utente
responsive
restore
ripristino
roolback
rounded tables
select
seo
server php locale
shortcode
shortpixel
sicurezza
smau
social
spotlight
SSL
system cache
table
template
tooltips
trasferimento sito
trucchi
twitter
ubuntu
uikit
user meta
visio alternative
web advisor
widget
widgetkit
windows
woocommerce
wordpress
wordpress api
wp capability
wp user
wp-config.php
wp_query
wug
xampp
yootheme

Come fare animazioni con CSS3

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

Oggi vediamo di divertirci un pò con le animazione di CSS3, c’è da dire che alcune di queste proprietà non sono correttamente visibili sui browser più antiquati, in fondo lascio una piccola legenda così da averla come promemoria nel caso doveste mai utilizzare il CSS3 animation in qualche progetto.

CSS3 Animations e compatibilità browser

La compatibilità browser è la seguente

Proprietà ie google_chrome firefox safari opera
@keyframes 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

animation 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

Cosa sono le animazione CSS3 ?

Con una CSS3 animation è possibile fare spostare un oggetto da un punto ad un altro della pagina (testo, div, ecc, ecc), è possibile utilizzare più animazioni conteporaneamente e per quante volte si vuole, per funzionare, un’animazione CSS3 necessita dei keyframes che sono delle istruzioni (regole o rules) sul movimento dell’oggetto da animare.

Esempi di animazione con CSS3

In questo esempio vediamo come un div passa dal colore verde a quello blu in 4 secondi

CSS

Analizziamo il codice CSS e vediamo come scriverlo correttamente

Riga 7  – animation-name : come si evince è il nome dell’animazione, possiamo chiamarla a piacimento purchè poi venga richiamata in modo identico dal keyframes ossia nelle righe 12 e 18.

Riga 8 – animation-duration : qui stiamo passando il numero (in secondi) della durata dell’animazione

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

Riga 19 e 20 – from / to : stiamo indicando che l’animazione passerà dal colore verde (from) al colore blu (to)

HTML

Per quanto concerne il codice HTML in questo caso è molto semplice, è sufficiente aprire e chiudere il tag div in quanto viene formattato già dal nostro CSS; il tag p fa solo figo 😀 in realtà non è necessario all’animazione, si può eliminare, modificare o sostituire con un qualunque altro tag.

Alcuni esempi di tipologie di animazione CSS3

Esistono altri parametri da poter passare nelle istruzione CSS così da avere animazione un pò più complesse, per esempio :

animation-delay: 1s  : indica il tempo impiegato per eseguire una determinata animazione, nel nostro quadrato il tempo che passa da verde a blu, anche qui il parametro è dato in secondi.

Valori supportati :  secondi|initial|inherit

animation-iteration-count: 3 : indica il numero di animazioni da eseguire, al termine ricomincia daccapo e così via per 3 volte o per il numero indicato.

Valore supportati : numerodivolte|infinite|initial|inherit

animation-direction: inverse : indica come eseguire l’animazione, nel nostro caso se viene specificato il valore “inverse” anzichè passare da verde (from) a blu (to) invertirà i parametri e quindi passerà da blu (to) a verde (from).

Valori supportati : normal|reverse|alternate|alternate-reverse|initial|inherit

Codice HTML / CSS completo

Questo è il codice completo di HTML e CSS3 per l’animazione in esempio.

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?