Transition eksempler

KLIK for at se eksempler på Transition

Nr. 1

transition: 5s all;

Nr. 2

transition: 5s linear;

Nr. 3

transition: 5s all steps(10);

Nr. 4

transition: 5s all steps(10, start);

Nr. 5

transition: 5s all cubic-bezier(0.280, -0.5, 0.685, 2);

Nr. 6

transition: 5s all cubic-bezier(0.90, -0.5, 0.685, 1.5);

Nr. 7

transition: 5s all cubic-bezier(0.90, 5, 0.685, -5);

Som det ses er cubic-bezier kurven et spændende, men samtidig en lidt ugennemskuelig paremeter når man koder sin transition. En mulighed er at benytte LEA VEROU smarte Cubic-bezier generator.