CSS3 animations input (del 2)

Hej igen =)

Med udgangspunkt i det jeg skrev sidst (nu ved jeg selvfølgelig ikke hvor meget du har rettet det til siden da), så skulle det være ganske simpelt:

Fra din "expand" animation fjerner du simpelthen dit slutpunkt, altså "100% { width: 400px; }", og så sætter du bredden i procent som en style attribut på selve elementet (i dette tilfælde .Kompetence-line elementet). Sæt evt. en bredde på .container for at holde det hele lidt mindre.

Grunden til at jeg sætter bredden som en style attribut (hvilket man ellers bør holde sig fra generelt), er blot fordi man ikke nødvendigvis ved hvad procentdelen vil være. Men jeg tvivler også på at du har et instrument der kan måle din kompetence inden for et eller andet felt, til f.eks. 95.625% (det ville være tåbeligt at hardcode bredder i procent fra 0 til 100 med den præcision i din CSS, men det er også et usandsynligt tal at bruge), så du vil med fordel kunne tilføje en CSS class for hver 10. procentdel, eller for 25%, 50% og 75%. Det kan du så smide i class attributten sammen med Kompetence-line.

Det med at fjerne slutpunktet virker selvfølgelig kun fordi du har et startpunkt (startbredde) defineret i din animation. Havde du ikke det, ville animationen ikke vide hvor den skulle starte, og så ville der slet ikke være nogen animation.

Kan du ikke bruge JQuery eller JS til at finde bredde og derefter sætte size dynamisk?

Kan du ikke bruge JQuery eller JS til at finde bredde og derefter sætte size dynamisk?

Problemet er ikke at finde og sætte bredden dynamisk.
Problemet er at min CSS3 animation jo er skrevet i min css-fil.
Den skriver

 00% { width: 25px; }
 70% { width: 300px; }
 85% { width: 280px; }
 100% { width: 300px; }

Det er scenariet for 100% som hedder expand-100 og så er min %-sats den der bestemmer hvilken animation der bruges.
Så laver en string der skriver hvilken animation der skal bruges - altså:

 string animationName = "-webkit-animation-name: expand-";
 animationName += komp.Procent.ToString();

Det betyder så at jeg har ret mange definitioner på forskellige animationer i min CSS-fil, og så skrives der en specifik til hver %-sats jeg har behov for.

Søger blot efter om der kan være en mere effektiv og smart måde at gøre det på?

Du kan lave beregninger i CSS, med calc, men du kan ikke sende parametre til CSS.

Evt. lav et script der skriver det direkte i style på dit tag.

Hej Phillip

Vidste ikke at det ville fungere korrekt når man ikke havde 100%. Men giver jo mening at den så selv finder hen til slutpunktet, på samme måde som en transition også selv finder fra A til B.

Har lavet følgende eksempel, men synes bare det virker som om det afvikles langsommere end før - kan det være fordi den nu selv skal beregne hvordan den kommer fra a til b? (altså skal beregne slutpunktet)?

Mit eksempel er her http://jsfiddle.net/z9t86xb6/9/

Hmm, uden at have testet det side-by-side, så ville jeg absolut ikke tro at det er langsommere. Dine animation-duration deklarationer er trods alt de samme. Selvom der nu ikke er megen forskel mellem 400px og 370px, så kunne det måske være dét der får det til at se langsommere ud? Øh, et voldsommere eksempel kan måske illustrere hvad jeg mener:

Forestil dig at du har en animation der udvider et element fra 0 til 100px på ét sekund. Animationen kører og elementet udvider sig 10 pixels for hver 100 millisekunder. Nu ændrer du på det, så elementet kun skal udvide sig til 10px. Animationen kører igen og det tager stadig nøjagtigt ét sekund, men elementet udvider sig nu kun 1 pixel for hver 100 millisekunder. Så rent visuelt, så ser det langsommere ud, fordi det ikke flytter sig lige så meget af gangen.

Jeg ved det ikke, men det er mit gæt, at det måske kunne være den effekt, der får animationen til at se lidt langsommere ud.