CSS3: ereditare proprietà per fotogramma chiave 0%

Question

Ho seguente problema: Voglio usare l'animazione CSS3 con norme keyframe (@keyframes mionome {})

Il problema è che voglio usare SINGLE at-regola animazione di fotogrammi chiave per più elementi, ma questi elementi hanno una posizione diversa ciascuno. Pertanto, l'animazione @keyframes dovrebbe ereditare le proprietà originali del selettore alla regola 0% (o da {}), in modo che l'animazione sia originata alla posizione e alla dimensione del selettore originale.

come questo:

@keyframes myanim { 
    0% { 
    left: inherit; 
    top: inherit; 
width:inherit; 
height:inherit; 
    } 

    100% { 
top: 50%; 
left:50%; 
    width: 100%; 
    height: 60%; 
    } 
} 

E selettore:

.myselector-one { 
top:10em; 
left:0em; 
width:10em; 
height:5em; 
animation: myanim 1s; 
} 
.myselector-two { 
top:20em; 
left:30em; 
width: 15em; 
height: 8em; 
animation: myanim 1s; 
} 

obiettivo è di ottenere le proprietà originali di ciascun selettore, metterli a 0% fotogramma chiave come posizione originaria e le dimensioni e animare a 100 % con le stesse proprietà per ogni selettore.

È possibile o devo creare animazione per ciascun selettore? Il problema è che non conoscerei la loro posizione in quanto verrà calcolata dinamicamente.

Per favore, nessuna soluzione jQuery, solo una pura CSS3! NON voglio usare il metodo jQuery animate.

Answer 1

Hmmm, ho esaminato questo problema per un po 'e non penso sia possibile utilizzare le animazioni CSS. Ho provato con this JSFiddle un numero di cose diverse e in esecuzione through tutorialsabout CSS Animations (vedere se qualcuno menziona lo stesso problema) e anche other informationabout it.

Sono quindi venuto alla realizzazione di quello che stai cercando di realizzare e penso che forse c'è una soluzione più semplice. Se le posizioni vengono calcolate dinamicamente, presumo che tu stia effettivamente utilizzando un certo livello di Javascript (o qualche pazzo metodo di calcolo CSS avanzato) quindi dovrei almeno pensare di impostare lo stile dell'elemento DOM con le nuove posizioni left o top . Mentre non sto parlando di animazione jQuery, quello che puoi fare invece è usare CSS3 Transitions in congiunzione con Javascript. Ciò significa che puoi ottenere alcuni dei benefici delle animazioni CSS, poiché il calcolo è più nativo (accelerato dall'hardware) anziché essere eseguito in Javascript, ma puoi perdere alcune cose.

Soprattutto, non ci sono eventi di transizione per il browser like there is for CSS Animations né si può avere un controllo a grana fine sui fotogrammi chiave ma si può lavorare dinamicamente con esso. Lo suggerisco solo perché la tua domanda si riferisce solo a un keyframe di 0% e uno di 100%.

Il problema con quello che stavi cercando di fare è che l'uso delle animazioni CSS deve essere statico e non estrarre i valori attualmente impostati per l'animazione (diversamente dalle transizioni). Quando si utilizza inherit, si sta effettivamente tentando di utilizzare lo top e left ecc. from it's parent.

Ancora una volta, questo non soddisfa le tue esigenze di puro CSS, ma l'uso di CSS Transitions significa solo manipolazione DOM limitata tramite Javascript piuttosto che jQuery animate.

Ecco another JSFiddle utilizzando jQuery (solo javascript molto semplice per impostare una classe o stili in linea) e Transizioni CSS.

HTML

<div class="myselector-one" id="a">Click Me</div> 
<div class="myselector-two" id="b">Click Me</div> 

Javascript

document.getElementById("a").onclick = function() 
{ 
    if (this.className.indexOf("animate-complete")!=-1) 
    { 
     this.className = this.className.replace(/animate\-complete/g,""); 
    } 
    else 
    { 
     this.className += " animate-complete"; 
    } 
} 
var bIsTransitioned = false; 
document.getElementById("b").onclick = function() 
{ 
    if (!bIsTransitioned) 
    { 
     this.style.top = "50%"; 
     this.style.left = "50%"; 
     this.style.width = "100%"; 
     this.style.height = "60%"; 
    } 
    else 
    { 
     this.style.top = ""; 
     this.style.left = ""; 
     this.style.width = ""; 
     this.style.height = "";   
    } 
    bIsTransitioned = !bIsTransitioned; 
} 

CSS

.myselector-one { 
    top:10em; 
    left:0em; 
    width:10em; 
    height:5em; 
    transition:all 2s; 
    background-color:#ffaa99; 
    position:absolute; 
} 
.myselector-two { 
    top:4em; 
    left:30em; 
    width: 15em; 
    height: 8em; 
    transition:all 2s; 
    background-color:#aaff99; 
    position:absolute; 
} 
.animate-complete 
{ 
    top: 50%; 
    left:50%; 
    width: 100%; 
    height: 60%; 
}