Original Hover Effects with CSS3 Transitions and Animations
Syntaxe:
transition: (hlidane_vlastnosti) trvani_animace (funkce_prubehu) (zpozdeni) (, dalsi_prechody);
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 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; }
/* 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; }
/* 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; }