D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
diafrica
/
www
/
js
/
menuzord
/
css
/
Filename :
menuzord-animations.css
back
Copy
/* CSS3 ANIMATIONS */ .zoom-in{ -webkit-animation: zoomIn 400ms ease both; -moz-animation: zoomIn 400ms ease both; -o-animation: zoomIn 400ms ease both; animation: zoomIn 400ms ease both; } @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1.5); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes zoomIn { 0% { -moz-transform: scale(1.5); } 100% { -moz-transform: scale(1); } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale(1.5); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes zoomIn { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } .zoom-out{ -webkit-animation: zoomOut 400ms ease both; -moz-animation: zoomOut 400ms ease both; -o-animation: zoomOut 400ms ease both; animation: zoomOut 400ms ease both; } @-webkit-keyframes zoomOut { 0% { -webkit-transform: scale(.6); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes zoomOut { 0% { -moz-transform: scale(.6); } 100% { -moz-transform: scale(1); } } @-o-keyframes zoomOut { 0% { -o-transform: scale(.6); } 100% { -o-transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(.6); } 100% { transform: scale(1); } } .drop-up{ -webkit-animation: drop-up 400ms ease both; -moz-animation: drop-up 400ms ease both; -o-animation: drop-up 400ms ease both; animation: drop-up 400ms ease both; } @-webkit-keyframes drop-up { 0% { -webkit-transform: translateY(100px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes drop-up { 0% { -moz-transform: translateY(100px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes drop-up { 0% { -o-transform: translateY(100px); } 100% { -o-transform: translateY(0); } } @keyframes drop-up { 0% { transform: translateY(100px); } 100% { transform: translateY(0); } } .drop-left{ -webkit-animation: drop-left 400ms ease both; -moz-animation: drop-left 400ms ease both; -o-animation: drop-left 400ms ease both; animation: drop-left 400ms ease both; } @-webkit-keyframes drop-left { 0% { -webkit-transform: translateX(-100px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes drop-left { 0% { -moz-transform: translateX(-100px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes drop-left { 0% { -o-transform: translateX(-100px); } 100% { -o-transform: translateX(0); } } @keyframes drop-left { 0% { transform: translateX(-100px); } 100% { transform: translateX(0); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation: swing 400ms ease-out both; -moz-animation: swing 400ms ease-out both; -o-animation: swing 400ms ease-out both; animation: swing 400ms ease-out both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .flip-animation{ -webkit-animation: flip-animation 700ms ease both; -moz-animation: flip-animation 700ms ease both; -o-animation: flip-animation 700ms ease both; animation: flip-animation 700ms ease both; } @-webkit-keyframes flip-animation { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flip-animation { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .roll-in{ -webkit-animation: roll-in 400ms ease both; -moz-animation: roll-in 400ms ease both; -o-animation: roll-in 400ms ease both; animation: roll-in 400ms ease both; } @-webkit-keyframes roll-in { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-15deg); transform: translateX(-100%) rotate(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes roll-in { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-15deg); -ms-transform: translateX(-100%) rotate(-15deg); transform: translateX(-100%) rotate(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .stretch{ -webkit-animation: stretch 500ms ease both; -moz-animation: stretch 500ms ease both; -o-animation: stretch 500ms ease both; animation: stretch 500ms ease both; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretch{ 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretch{ 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @-o-keyframes stretch{ 0% { -o-transform: scaleX(0.3); } 40% { -o-transform: scaleX(1.02); } 60% { -o-transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); } 100% { -o-transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); } 100% { -o-transform: scaleX(1); } }