Transitions i CSS
Transitions (overgange) er et værktøj i CSS der kan animere overgangen mellem to forskellige stadier på samme objekt. På den måde, kan man tænke på dem som en tween imellem to keyframes i, eksempelvis, Animate.
Måden transitions fungerer på er at man har et stykke kode som for eksempel en div, et stykke tekst, en
img eller en iFrame, som er blevet stylet med CSS, ligesom man plejer. Udover det vanlige styling, skal man også lige tilføje CSS reglen transition: hvad-man-vil-ændre hvor-længe-det-skal-tage; det kunne eksempelvis se sådan her ud: transition: width 2s;. På den måde gør man det stylede opmærksom på at den skal holde øje med skift i sin bredde og at den skal bruge 2 sekunder på at animere overgangen, hvis den på én eller anden måde får noget ny information at forholde sig til.
Derefter tilføjer man en ny CSS regel med en selector, såsom :hover som så går ind og ændrer på det man har defineret under sin transition regel.
Det kunne se sådan her ud:
div{width:50%; transition: width 2s;}
div:hover{width:100%;}
Lad os tage nogle eksempler.
Størrelse og hover
Herunder er en div i størrelsen 150x150 px. Ved :hover, skifter bredde til 300px
wow
CSS'en til dette, ser således ud:
.eksempel{
width: 150px;
height: 150px;
background-color: hotpink;
transition: width 2s;
}
.eksempel:hover{
width:300px;
}
Farve og active
Herunder er en div med baggrunds farven hotpink. Ved :active, skifter farven til lightgoldenrodyellow (mest af alt fordi at jeg faldt pladask for så langt et farvenavn)
Selectoren :active betyder at man skal klikke og holde musen nede for at se effekten
wow
CSS'en til dette, ser således ud:
.eksempel{
width: 150px;
height: 150px;
background-color: hotpink;
transition: background-color 2s;
}
.eksempel:active{
background-color: lightgoldenrodyellow;
}
Sku' vi aldrig prøve at kombinere det
Jo, bevares, det kan vi sagtens.
Fremgangs måden er den samme. Den stor forskel her, er at transition reglen er blevet ændret til at være opmærksom på all, altså alt hvad den overhovedet kan.
wow
CSS'en til dette, ser således ud:
.eksempel{
width: 150px;
height: 150px;
background-color: hotpink;
transition: all 2s;
}
.eksempel:hover{
width:300px;
}
.eksempel:active{
background-color: lightgoldenrodyellow;
}
Ka' man ease det?
Jep. Det kan man ihvertfald. Easing bliver skrevet ind som en del af transitionens streng.
Det kunne f.eks. se således ud: .eksempel {height 150px; width:10%; transition:width 1.5s ease-in; med den kode og en css:hover der påvirker den, vil der ske en bevægelse på bredden over halvandet sekund, med en ease-in
Lad os tage lidt taktile eksempler:
Ease in
Ease out
Ease in out
bounce
steps
(6 styks)
Hvad så nu?
Det er desværre ikke kun fantasien der sætter grænser herfra. Der er mange ting som CSS Transitions ikke kan animere en overgang mellem. Generelt har den det bedst med tal & matematik (farvenavne i CSS er også matematik). Heldigvis er der rigtig mange CSS regler der kan bruges. Herunder kommer der et par links til CSS regler som kan lave nogle fede og iøjenfaldende transitions.