Tomáš Daněk

CSS3 přechody

Original Hover Effects with CSS3 Transitions and Animations

Syntaxe:

transition:
  (hlidane_vlastnosti)
  trvani_animace
  (funkce_prubehu)
  (zpozdeni)
  (, dalsi_prechody);

CSS3 transformace

Rotace, zvětšení a změna průhlednosti při najetí myší:

.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 animace

• http://cssload.net/
• http://www.nikesh.me/blog/?s=css3+animation
• http://www.red-team-design.com/css3-loading-animation-experiment 

Změna průhlednosti obrázku po najetí 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;
}

Změna průhlednosti (prolnutí) obsahové části při načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {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: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

Postupná změna průhlednosti odstavců po načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {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: fadein ease-in 1;
  -o-animation: fadein ease-in 1;
  animation: fadein 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;
}