⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

Vi ska börja med transitions, som inte är samma som sak animations. Man använder sig av transitions för att låta förändringar i CSS-värden att på ett mjukt sätt övergå, som t.ex. en färgförändring som mjukt övergår till en annan färg när man hovrar över den med musen. Vi tar ett exempel med en länk som ändrar bakgrundsfärg när man hovrar över den. Uppmärkningen ser ut så här:

Och så stylar vi den med lite padding och en ljusgrön bakgrund som förändras till en mörkare när man hovrar över den:

Bild på knappar med texten klicka på mig
Bild: klicka på mig – hover och vanlig läge

Figur 1: Normal läge och :hover läge

 

Och så ska vi lägga till en transition deklaration på det så att den övergår på ett mjukt sätt:

 

Som du ser så har vi tre olika delar i transition deklarationen:

  • transition-property: som i det här fallet är backgrunden
  • transition-duration:  som vi satt till 0.5 sekunder
  • transition-timing-function:  som är satt till ease, vilket syftar till hur fort den går och om den ska gå fortare i slutet eller i början

Det finns sex möjliga värden för timing-funktionen:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier (som tillåter dig att ange en egen timing kurva)

För vår exempel så kan man knappt se skillnad på vilken det är, men i längre animationer så blir det viktigare att välja rätt värde.

När det gäller timing funktionen så kan sätta ett värde på :hover också, då fungerar det så att värdet i :hover gäller när muspekaren hamnar över den taggen det gäller och när pekaren lämnar området så är det värdet i den vanliga deklarationen som gäller, på så sätt kan man variera tiderna. t.ex.

 

Det går att skriva det på ett kortare sätt också:

 

Det finns möjlighet att lägga till 4 olika värden på en korthands-deklaration:

 

Rotering med CSS3 transform

Snurra medurs:

Snurra vertikalt:

Snurra horizontellt:

Snurra runt Z axeln:

Snurra runt alla axlar:

Transformering med CSS3 transition, transform & animation

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: