@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:

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

Valid XHTML og CSS / Copyright © Erik Ginnerskov august 2013
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - @keyframes
sidens top
Brugere lige nu: 1
Home Mail