@CHARSET "UTF-8"; .animation-next{ -webkit-animation:fadeInRight .5s ease-in forwards; -moz-animation:fadeInRight .5s ease-in forwards; } @-webkit-keyframes fadeInRight{ 0%{opacity:0;-webkit-transform:translateX(100px)} 20%{opacity:0.2;-webkit-transform:translateX(50px)} 40%{opacity:0.4;-webkit-transform:translateX(20px)} 60%{opacity:0.6;-webkit-transform:translateX(10px)} 80%{opacity:0.8;-webkit-transform:translateX(5px)} 100%{opacity:1;-webkit-transform:translateX(0)} } .animation-rotateOut{ -webkit-animation:rotateOut 5s .2s ease infinite; -moz-animation:rotateOut 5s .2s ease infinite;} @-webkit-keyframes rotateOut{ 0%{-webkit-transform:rotateY(0);opacity:1} 100%{-webkit-transform:rotateY(-360deg);} } @-moz-keyframes rotateOut{ 0%{-webkit-transform:rotateY(0);opacity:1} 100%{-webkit-transform:rotateY(-360deg);} } .animation-rotateup{ -webkit-animation:rotateup 3s .2s ease ; -moz-animation:rotateup 3s .2s ease ;} @-webkit-keyframes rotateup{ 0%{-webkit-transform:rotateX(0);} 100%{-webkit-transform:rotateX(-360deg);} } @-moz-keyframes rotateup{ 0%{-webkit-transform:rotateX(0);} 100%{-webkit-transform:rotateX(-360deg);} } .animation-bounceOut{ -webkit-animation:bounceOut 1s .2s ease both; -moz-animation:bounceOut 1s .2s ease both; } @-webkit-keyframes bounceOut{ 0%{-webkit-transform:scale(1)} 25%{-webkit-transform:scale(.95)} 50%{opacity:1;-webkit-transform:scale(1.1)} 100%{opacity:0;-webkit-transform:scale(.3)} } @-moz-keyframes bounceOut{ 0%{-webkit-transform:scale(1)} 25%{-webkit-transform:scale(.95)} 50%{opacity:1;-webkit-transform:scale(1.1)} 100%{opacity:0;-webkit-transform:scale(.3)} } .animation-share{ -webkit-animation:define 1s .1s infinite ; } @-webkit-keyframes define{ 0% { right:0px; top:0px;} 50% { right:0px; top:20px;} 100% { right:0px; top:0px;} } .animation-bounceInUp{ -webkit-animation:bounceInUp 1s .2s ease both; -moz-animation:bounceInUp 1s .2s ease both; } @-webkit-keyframes bounceInUp{ -webkit-transform:scale(-1,1); transform-origin:center top; } @-moz-keyframes bounceInUp{ 0%{opacity:0;-moz-transform:translateY(2000px)} 60%{opacity:1;-moz-transform:translateY(-30px)} 80%{-moz-transform:translateY(10px)} 100%{-moz-transform:translateY(0)} } .animation-flipOutX{ -webkit-animation:flipOutX 1s .2s ease-in both; -moz-animation:flipOutX 1s .2s ease-in both;} @-webkit-keyframes flipOutX{ 0%{-webkit-transform:perspective(0px) rotateX(0deg);opacity:1;transform-origin:center top;} 50%{-webkit-transform:perspective(0px) rotateX(45deg);opacity:0.5;transform-origin:center top;} 100%{-webkit-transform:perspective(0px) rotateX(90deg);opacity:0;transform-origin:center top;} } @-moz-keyframes flipOutX{ 0%{-moz-transform:perspective(0px) rotateX(0deg);opacity:1} 100%{-moz-transform:perspective(00px) rotateX(90deg);opacity:0} } .animation-breath{ -webkit-animation:breath 2s ease-in-out infinite; -moz-animation:breath 2s ease-in-out infinite; } @-webkit-keyframes breath { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } @-moz-keyframes breath { from { opacity: 0.4; -webkit-box-shadow:0 0 5px #ccc; } 50% { opacity: 1; -webkit-box-shadow: 0 0 10px #398B08; } to { opacity: 0.4; -webkit-box-shadow:0 0 5px #ccc;} }