css3 animation

by Farzad Cyrus

HTML

http://tympanus.net/Tutorials/3DHoverEffects/

http://www.awwwards.com/stunning-resources-for-paper-folding-animation-effect.html

CSS

@-webkit-keyframes unfold {0% {-webkit-transform: rotateX(180deg);} 50% {-webkit-transform: rotateX(-30deg);} 100% {-webkit-transform: rotateX(0deg);}}
@keyframes unfold {0% {transform: rotateX(180deg);} 50% {transform: rotateX(-30deg);} 100%{transform: rotateX(0deg);}}

@-webkit-keyframes unfold2 {0% {-webkit-transform: rotateX(180deg);} 50% {-webkit-transform: rotateX(90deg);} 100% {-webkit-transform: rotateX(0deg);}}
@keyframes unfold2 {0% {transform: rotateX(180deg);} 50% {transform: rotateX(90deg);} 100%{transform: rotateX(0deg);}}

@-webkit-keyframes unfold-first {0% {-webkit-transform: rotateX(-90deg);} 50% {-webkit-transform: rotateX(60deg);} 100% {-webkit-transform: rotateX(0deg);}}
@keyframes unfold-first {0% {transform: rotateX(-90deg);} 50% {transform: rotateX(60deg);} 100% {transform: rotateX(0deg);}}

@-webkit-keyframes fold {0% {-webkit-transform: rotateX(0deg);} 100% {-webkit-transform: rotateX(180deg);}}
@keyframes fold {0% {transform: rotateX(0deg);} 100% {transform: rotateX(180deg);}}

@-webkit-keyframes fold-first {0% {-webkit-transform: rotateX(0deg);} 100% {-webkit-transform: rotateX(-180deg);}}
@keyframes fold-first {0% {transform: rotateX(0deg);} 100% {transform: rotateX(-180deg);}}

@-webkit-keyframes swing-out {0% {-webkit-transform: rotateX(0deg);} 30% {-webkit-transform: rotateX(-30deg);} 60% {-webkit-transform: rotateX(15deg);} 100%{-webkit-transform: rotateX(0deg);}}
@keyframes swing-out {0% {transform: rotateX(0deg);} 30% {transform: rotateX(-30deg);} 60% {transform: rotateX(15deg);} 100%{transform: rotateX(0deg);}}

@-webkit-keyframes swing-in {0% {-webkit-transform: rotateX(0deg);} 50% {-webkit-transform: rotateX(-10deg);} 90% {-webkit-transform: rotateX(15deg);} 100%{-webkit-transform: rotateX(0deg);}}
@keyframes swing-in {0% {transform: rotateX(0deg);} 50% {transform: rotateX(-10deg);} 90% {transform: rotateX(15deg);} 100%{transform: rotateX(0deg);}}

@-webkit-keyframes unfold-over {0% {-webkit-opacity: 1.0;} 100%...