CSS3 animations input

Enig med de andre. Du kan ikke give parametre med til CSS, som sådan, men du kan overskrive individuelle parametre ved at gøre det lidt anderledes.

Det kan være lidt af en smagssag, men her er mit bud.

Du har koblet tingene meget hårdt sammen: animationsnavn, easing-funktion og tid er alt sammen koblet op på hver sin class attribut. Mit hoved siger mig at vi splitter det ad i mindre stykker og så sætter dem sammen igen på en lidt anden måde.

Idéen her er at give tingene en fornuftig default animation, og så overskrive de individuelle parametre i animationen enkeltvis, så de opfører sig lidt forskelligt. Alt bliver styret af dine class attributter.

Jeg kan sagtens forstå dit ønske om at samle alting i en animation to rule them all, men jeg tror det giver mere mening at skille det lidt ad, så du får nogle små animationer, der gør noget meget specifikt og som så kan genbruges på andre elementer. Så hvis jeg tager et skridt tilbage, så kan jeg se at vi kan skille det ad i to animationer. Én der udvider linierne og én der fader teksten ind. Det betyder også at jeg gerne vil tilføje en span rundt om teksten i linierne, så vi kan tilgå den specifikt.

 <div class="container">
     <div class="Kompetence-line one ease-in"><span>ASP.NET MVC</span></div>
     <div class="Kompetence-line three ease-out"><span>HTML5</span></div>
     <div class="Kompetence-line six ease-out"><span>TFS</span></div>
     <div class="Kompetence-line two ease"><span>CSS3</span></div>
     <div class="Kompetence-line four ease-in-out"><span>.NET</span></div>
     <div class="Kompetence-line one ease-in"><span>Webforms</span></div>
     <div class="Kompetence-line five ease"><span>Security</span></div>
     <div class="Kompetence-line two ease"><span>Windows Forms</span></div>
     <div class="Kompetence-line four ease-in-out"><span>Usability</span></div>
     <div class="Kompetence-line one ease-in"><span>Kravspecifikation</span></div>
 </div>

Jeg har også lavet lidt om på dine class attributter, som du nok kan se. Det forklarer jeg om lidt, men jeg smider lige CSS'en ind, som jeg har rodet noget mere med:

 .Kompetence-line {
     padding: 3px;
     padding-right: 10px;
     margin-bottom: 3px;
     width: 120px;
     text-align: right;
     -webkit-animation: expand 1s ease-in forwards;
 }
 
 .Kompetence-line:nth-child(even) 
 {
     background-color: #8dc63f;
 }
 
 .Kompetence-line:nth-child(odd) 
 {
     background-color: rgb(169, 169, 169);
 }
 
 .Kompetence-line span {
     color: white;
     opacity: 0;
     -webkit-animation: inherit;
     -webkit-animation-name: fade-in;
 }
 
 .one {
     -webkit-animation-duration: 1s;
 }
 
 .two {
     -webkit-animation-duration: 1.2s;
 }
 
 .three {
     -webkit-animation-duration: 1.4s;
 }
 
 .four {
     -webkit-animation-duration: 1.7s;
 }
 
 .five {
     -webkit-animation-duration: 1.9s;
 }
 
 .six {
     -webkit-animation-duration: 2.2s;
 }
 
 .ease-in {
     -webkit-animation-timing-function: ease-in;
 }
 
 .ease {
     -webkit-animation-timing-function: ease;
 }
 
 .ease-out {
     -webkit-animation-timing-function: ease-out;
 }
 
 .ease-in-out {
     -webkit-animation-timing-function: ease-in-out;
 }
 
 @-webkit-keyframes fade-in {
     0% {
         opacity: 0;
     }
     
     75%
     {
         opacity: 0;
     }
     
     100% {
         opacity: 1;
     }
 }
 
 @-webkit-keyframes expand {
     0% {
         width: 120px;
     }
     
     100% {
         width: 400px;
     }
 }

Okay, jeg har samlet tingene lidt mht. Kompetence-line, og vigtigst af alt givet den en default animation, ved netop at bruge -webkit-animation.

Span-elementerne inde i Kompetence-line får sat deres tekstfarve til hvid, og så gjort gennemsigtige, i stedet for at følge baggrundsfarven. Det giver den samme effekt, men er nemmere at holde styr på. Vigtigst af alt her er at de arver alle animationsparametrene fra Kompetence-line, ved hjælp af -webkit-animation:inherit;, så easing-funktion og tid bliver den samme (ergo, de følges ad). Derefter så går vi specifikt ind og ændrer navnet (og kun navnet, ikke hele animationen) på animationen til "fade-in", så teksten fader ind, i stedet for at udvide sig.

Kig på class attributterne igen i HTML, så kan du se at de bliver brugt til at ændre på tiden (og kun tiden) og easing-funktionerne og (og kun... you get the point).

Det var lidt hurtigt smækket sammen, så det kan sikkert gøres endnu snedigere, men det er generelt en go' idé at skille tingene ad i mindre stykker, der kun gør én ting og så sætte dem sammen, så man får noget mere interessant ud af det. På den måde kan man ændre udseende og opførsel bare ved at bytte rundt på class attributterne.

Nu fik jeg sandelig også smidt alt for mange ord ind, men jeg håber du forstod det. Ellers må du skrive "A'hva?" og så skal jeg prøve at forklare mig selv.

css understøtter ikke parametre

Du skal have fat i en preprocessor her.. kig evt. på Less eller Sass

Tak Phillip

Var faktisk selv inde på noget af det samme selv efter at have skrevet her, for at gøre det mere fleksibelt, men du optimerede det ved at lave baggrundsfarven til gennemsigtig og inherit'e så man kun ændre "name" på animationen og de følges ad, men man får en anden funktion udført på teksten.
Tak det var en god hjælp