Articles of css transitions

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:

Transizioni CSS3: la “transizione: tutti” è più lenta di “transizione: x”?

Ho una domanda sulla velocità di rendering per la proprietà di transizione css3. Supponiamo di avere un numero di elementi: div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} È molto più efficiente indirizzare tutte le transizioni per tutti […]

Callback sulla transizione CSS

È ansible ricevere una notifica (come il callback) quando una transizione CSS è stata completata?

Previeni lo sfarfallio sulla transizione webkit di webkit-transform

Possibile duplicato: le animazioni di iphone webkit css provocano uno sfarfallio Per qualche ragione, subito prima che la mia animazione della proprietà di trasformazione del webkit si verifichi, c’è un leggero sfarfallio. Ecco cosa sto facendo: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $(“#element”).css(“-webkit-transform”, “translateX(” + value + “px)”); Subito prima della transizione, c’è […]