Articles of css transitions

Transizione CSS3 al clic usando puro CSS

Sto cercando di ottenere un’immagine (un simbolo più) per ruotare di 45 gradi per creare un simbolo a croce. Finora sono riuscito a ottenere ciò usando il codice qui sotto ma lavorando su hover, volevo farlo ruotare al clic. C’è un modo semplice per farlo usando i CSS ? Il mio codice è: CSS img […]

Ruota o ruota un’immagine al passaggio del mouse

Voglio scoprire come creare un’immagine rotante o ruotante quando è al passaggio del tempo. Mi piacerebbe sapere come emulare quella funzionalità con i CSS sul seguente codice: img { border-radius: 50%; }

Stenografia della transizione CSS con proprietà multiple?

Non riesco a trovare la syntax corretta per la stenografia della transizione CSS con proprietà multiple. Questo non fa nulla: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { […]

Espandi div dal centro invece che solo in alto e a sinistra usando CSS

Non sono sicuro che sia ansible, ma ho pensato che sarebbe stato bello usare le trasformazioni CSS per creare un effetto in cui un div si espande dal suo centro a un’altezza e una larghezza predeterminate, piuttosto che solo dall’angolo in alto a sinistra. Ad esempio, se ho ( demo ) e (prefissi dei produttori […]

Come avere più transizioni CSS su un elemento?

È una domanda piuttosto semplice, ma non riesco a trovare una documentazione molto buona sulle proprietà di transizione CSS. Ecco lo snippet CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: […]

Come impedire la modifica del rendering del testo Webkit durante la transizione CSS

Sto usando le transizioni CSS per la transizione tra stati trasformati CSS (fondamentalmente la transizione della scala di un elemento). Ho notato che quando l’elemento è in fase di transizione, il resto del testo sulla pagina (in Webkit) tende a modificare leggermente il rendering fino al completamento della transizione. Fiddle: http://jsfiddle.net/russelluresti/UeNFK/ Ho anche notato che […]

Perché la mia trasformazione si riavvia?

Sto cercando di far rimanere il mio elemento in posizione (dopo la transizione). In questo momento, la posizione tradotta è dove voglio ma poi il mio nome torna sulla citazione. Mi manca un pezzo di codice o c’è un pezzo di codice che sta facendo accadere questo scatto? .blockquote { font-family: “Open Sans”, Verdana, Arial, […]

cos’è più veloce? Transizioni CSS3 o animazioni jQuery?

Sto lavorando a un’app HTML5 per iPad e ho già implementato il supporto di onuch per triggersre gli eventi più velocemente e sto usando jQuery per indirizzare gli elementi più facilmente, ma per le animazioni sto usando le transizioni CSS3 Cosa pensi sia più veloce? usando le animazioni jQuery dato che ho già importato la […]

Effetto Hover: espandere il bordo inferiore

Sto cercando di ottenere un effetto di transizione al passaggio del mouse sul bordo che il bordo si espande al passaggio del mouse. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ”; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after […]

CSS 3 slide-in dalla transizione a sinistra

Esiste una soluzione cross browser per produrre una transizione slide-in solo con CSS, non javascript? Di seguito è riportato un esempio del contenuto HTML: