@keyframes css3
10 
16 
12.1
Siden er opdateret 3. 8. 2013
Med @keyframes kan man lave en slags animation som vil ske gradvis fra en definition til en anden:
- Man kan flytte en boks rundt i browservinduet
- Man kan ændre størrelsen på en boks
- Man kan ændre baggrundsfarven på en boks
Animationerne kan kombineres vilkårligt.
div.mymove {
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 15s infinite;
}
@keyframes mymove {
0% {left:0px; background:red; width:100px;}
100% {left:200px; background:yellow; width:200px;}
}
vil se sådan ud :
Disse værdier på @keyframes er obligatoriske og har følgende funktioner:
- animationname
- Definerer navnet på animationen
- keyframes-selector
- Procentvis varighed på animationen. Disse værdier er lovlige:
- 0-100%
- from - svarer til 0%
- to - svarer til 100%
- css-styles
- En eller flere lovlige definitioner:
- Størrelse:
- width og height med angivelse af størrelse i px både for udgangspositionen og slutpositionen
- Position:
- top eller bottom og left eller right med angivelse af position i px både for udgangspositionen og slutpositionen
- Baggrundsfarve:
- Kan angives som rgb eller hex både for udgangspositionen og slutpositionen
