Animácia

CSS3 prechody

Original Hover Effects with CSS3 Transitions and Animations

Syntax:

transition: 
  (strážené_vlastnosti) 
  trvanie_animácie 
  (funkcia_priebehu) 
  (oneskorenie) 
  (, ďalšie_prechody);

CSS3 transformácia

Rotácia, zväčšenie a zmena priehľadnosti pri nabehnutí myšou:

.thumbs { 
  opacity: 0; 
  transform: rotateY(180deg) scale(0.5, 0.5); 
  transition: all 450ms ease-out 0s; 
} 
.thumbs:hover { 
  opacity: 1; 
  transform: rotateY(0deg) scale(1, 1); 
}

CSS3 animácie

Zmena priehľadnosti obrázku po nabehnutí myši

/* css3 hover opacity */ 
img { 
  -webkit-opacity: 0.5; 
  -moz-opacity: 0.5; 
  -ms-opacity: 0.5; 
  -o-opacity: 0.5; 
  opacity: 0.5; 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  transition: all 1s ease; 
} 
img:hover { 
  -webkit-opacity: 1; 
  -moz-opacity: 1; 
  -ms-opacity: 1; 
  -o-opacity: 1; 
  opacity: 1; 
}

Zmena priehľadnosti (prelínania) obsahovej časti pri načítaní stránky

/* css3 transition fade-in efekt na stránke load */ 
/* Chrome a Safari, Firefox, IE, Opera, CSS3 browser */ 
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;} } 
@-moz-keyframes fadeín {from {opacity: 0;} to {opacity: 1;}} 
@-ms-keyframes fadeín {from {opacity: 0;} to {opacity: 1;}} 
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}} 
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}} 
#section-content { 
  /* use animattion ease-in and repeat it only 1 time */ 
  -webkit-animation: fadein 2s; 
  -moz-animation: fadeín 2s; 
  -ms-animation: fadeín 2s; 
  -o-animation: fadeín 2s; 
  animation: fadeín 2s; 
}

Postupná zmena priehľadnosti odsekov po načítaní stránky

/* css3 transition fade-in efekt na stránke load */ 
/* Chrome a Safari, Firefox, IE, Opera, CSS3 browser */ 
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;} } 
@-moz-keyframes fadeín {from {opacity: 0;} to {opacity: 1;}} 
@-ms-keyframes fadeín {from {opacity: 0;} to {opacity: 1;}} 
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}} 
@keyframes fadeín {from {opacity: 0;} to {opacity: 1;}} 
p { 
  /* make invisible upon start */ 
  opacity: 0; 
  /* use animattion ease-in and repeat it only 1 time */ 
  -webkit-animation: fadein ease-in 1; 
  -moz-animation: fadein ease-in 1; 
  -ms-animation: fadeín ease-in 1; 
  -o-animation: fadeín ease-in 1;
  animation: fadeín ease-in 1; 
  /* tafter animation is done we remain at the last keyframe value (opacity: 1) */ 
  -webkit-animation-fill-mode: forwards; 
  -moz-animation-fill-mode: forwards; 
  -ms-animation-fill-mode: forwards; 
  -o-animation-fill-mode: forwards; 
  animation-fill-mode: forwards; 
  /* duration */ 
  -webkit-animation-duration: 1s; 
  -moz-animation-duration: 1s; 
  -ms-animation-duration: 1s; 
  -o-animation-duration: 1s; 
  animation-duration: 1s; 
  /* delay */ 
  -webkit-animation-delay: 0; 
  -moz-animation-delay: 0; 
  -ms-animation-delay: 0; 
  -o-animation-delay: 0; 
  animation-delay: 0;
} 
p.one { 
  -webkit-animation-delay: 0.7s; 
  -moz-animation-delay: 0.7s; 
  -ms-animation-delay: 0.7s; 
  -o-animation-delay: 0.7s; 
  animation-delay: 0.7s; 
} 
p.two { 
  -webkit-animation-delay: 1.2s; 
  -moz-animation-delay:1.2s; 
  -ms-animation-delay:1.2s; 
  -o-animation-delay:1.2s; 
  animation-delay: 1.2s; 
} 
p.three { 
  -webkit-animation-delay: 1.6s; 
  -moz-animation-delay: 1.6s; 
  -ms-animation-delay: 1.6s; 
  -o-animation-delay: 1.6s; 
  animation-delay: 1.6s; 
}