css - How to correctly do this css3 animation? -
i have animate skip lorry. trying make skip move on lorry not happening correctly in way be.
the live preview here. if you'll check out you'll understand i'm saying , trying do. i'm making changes in skew() , rotate() turns out bad job.
index.html
<!doctype html> <html> <title>animate lorry</title> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <div> <img class="sc" src="img/chain puller.png"/> </div> <div> <img class="animate" src="img/skip lorry.png"/> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </body> </html> style.css
body{ background-color: #000; } /*lorry*/ .animate { padding: 100px; padding-left:400px; width: 400px; height: 180px; position: relative; /*-webkit-animation-name: lorry; -webkit-animation-duration: 15s; -webkit-animation-fill-mode: forwards; animation-name: lorry; animation-duration: 15s; animation-fill-mode:forwards;*/ } /* chrome, safari, opera */ /*@-webkit-keyframes lorry { 0% {right:0px; top:0px;} 25% {right:500px; top:0px;} 50% {right:500px; top:0px;} 75% {right:500px; top:0px;} 100% {right:500px; top:0px;} } */ /*@keyframes lorry { 0% {right:0px; top:0px;} 25% {right:500px; top:0px;} 50% {right:500px; top:0px;} 75% {right:500px; top:0px;} 100% {right:500px; top:0px;} }*/ /*skiphire*/ .contain { padding: 250px; padding-left: 445px; width: 300px; height: 160px; position: absolute; -webkit-animation-name: container; -webkit-animation-duration: 5s; -webkit-animation-delay: 2s; -webkit-animation-fill-mode: forwards; animation-name: container; animation-duration: 5s; animation-delay:2s; animation-fill-mode:forwards; } @-webkit-keyframes container { 0% {left:0px; bottom:0px;} 25% {left:200px; bottom:0px;} 50% {left:200px; bottom:200px;} 75% {left:0px; bottom:200px;} 100% {left:0px; bottom:150px;} } @keyframes container { 0% {left:0px; bottom:0px;} 25% {left:200px; bottom:0px;} 50% {left:200px; bottom:200px;} 75% {left:0px; bottom:200px;} 100% {left:0px; bottom:200px;} } .sc { width: 400px; height: 300px; padding: 70px; float: left; padding-left: 603px; position :absolute; -webkit-animation-fill-mode: forwards; -webkit-animation: cssanimation 5s 1 ease; -moz-animation: cssanimation 5s 1 ease; -o-animation: cssanimation 5s 1 ease; animation-fill-mode:forwards; } @-webkit-keyframes cssanimation { { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -webkit-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); } } @keyframes cssanimation { { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -webkit-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); } } tested in chrome only. should compatible ie , mozilla.
@-webkit-keyframes cssanimation { { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -webkit-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); } { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -moz-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); } } @keyframes cssanimation { { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -webkit-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); } { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); } { -moz-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); } } try -moz- = mozzila -ms- = internet explorer
http://www.w3schools.com/cssref/css3_browsersupport.asp
scroll @ bottom of page
edit: misread question thought didnt manage make work on ie , mozzila
Comments
Post a Comment