html - CSS vehicle animation -



html - CSS vehicle animation -

i'm trying animate tractor moving across screen. i've got working on screen, want work across different platforms (only included -webkit-). when re-size, tractor fluid, wheels aren't. how can create them adjust together?

<body> <div class="container"> <div class="tractor"> <img src="img/tractor-700px.png" alt="tractor"> </div> <div class="wheels"> <div class="b_wheel"> <img src="img/b_wheel.png"> </div> <div class="f_wheel"> <img src="img/f_wheel.png"> </div> </div> </div>

here's main css:

.tractor { width: 380px; position: absolute; top: 40%; left: -5%; } .tractor img { width: 100%; } .tractor::after { content: ""; display: block; width: 120px; height: 120px; background: url('img/steam.png') no-repeat; background-size: 120px; position: absolute; top: -37%; left: 56%; opacity: 0; } .f_wheel {; width: 125px; position: absolute; top: 66.5%; left: 13%; } .f_wheel img { width: 100%; } .b_wheel { width: 190px; position: absolute; top: 58.8%; left: -7%; } .b_wheel img { width: 100%; }

and css animation:

.tractor { -webkit-animation: tractor-bounce 3s ease-in-out infinite, tractor-go 10s ease-in-out forwards; } .tractor::after { -webkit-animation: steam 4s 2s infinite; } .f_wheel, .b_wheel { -webkit-animation: wheel-spin 10s ease-in-out forwards; } .f_wheel { -webkit-animation: front-wheel-go 10s ease-in-out forwards, wheel-spin 10s ease-in-out forwards; } .b_wheel { -webkit-animation: back-wheel-go 10s ease-in-out forwards, wheel-spin 10s ease-in-out forwards; } /* keyframes - webkit ------------------------------------------ */ @-webkit-keyframes tractor-bounce { 50% { -webkit-transform: rotate(-5deg) translatey(-3px); } } @-webkit-keyframes tractor-go { 100% { left: 70%; } } @-webkit-keyframes steam { 40% { opacity: .8; } 60% { opacity: 1; } 100% { -webkit-transform: translate(-15%, -35%) rotatez(20deg); } } @-webkit-keyframes wheel-spin { 0% { -webkit-transform: translatex(0px) rotate(50deg); } 100% { -webkit-transform: translatex(0px) rotate(480deg); } } @-webkit-keyframes front-wheel-go { 100% { left: 88%; } } @-webkit-keyframes back-wheel-go { 100% { left: 68.5%; } }

jsfiddle show in action: http://jsfiddle.net/0j5l92vh/1/

[ps - first post here many in advance! allow me know if need include else.]

i found solution problem.

i utilized .container div have provided maintain positioned relative tractor image. can see changes in css code made create work in non webkit browsers. not work on versions of net explorer before number 9.

the changes have made css.

jsfiddle: http://jsfiddle.net/larryjoelane/h324j6u6/113/

css:

.container{ width: 380px; position: relative; /*bind animation , set properties*/ -webkit-animation: tractor 10s linear 0s; /* chrome, safari, opera */ animation: tractor 10s linear 0s; } /*bind wheel-spin animation*/ .f_wheel, .b_wheel { -webkit-animation: wheel-spin 10s ease-in-out forwards; animation: wheel-spin 10s ease-in-out forwards; } /*bind tractor bounce-animation*/ .tractor { -webkit-animation: tractor-bounce 3s ease-in-out infinite, tractor-go 10s ease-in-out forwards; animation: tractor-bounce 3s ease-in-out infinite, tractor-go 10s ease-in-out forwards; } .tractor img{ width:100%; } .b_wheel { width: 190px; position: relative; top: -120px; left: -7%; } .b_wheel img { width: 100%; } .f_wheel{ width: 125px; position:relative; top: -258px; left: 65%; } .f_wheel img { width: 100%; } /* chrome, safari, opera */ @-webkit-keyframes tractor { 0% { left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:400px; top:0px;} 75% {left:600px; top:0px;} 100% {left:800px; top:0px;} } /* standard syntax */ @keyframes tractor { 0% { left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:400px; top:0px;} 75% {left:600px; top:0px;} 100% {left:800px; top:0px;} } /*standard browser animation*/ @keyframes wheel-spin{ 0% { transform: translatex(0px) rotate(50deg); } 100% { transform: translatex(0px) rotate(480deg); } } /*webkit browser animation*/ @-webkit-keyframes wheel-spin{ 0% { -webkit-transform: translatex(0px) rotate(50deg); } 100% { -webkit-transform: translatex(0px) rotate(480deg); } } /*webkit tractor-bounce animation*/ @-webkit-keyframes tractor-bounce { 50% { -webkit-transform: rotate(-5deg) translatey(-3px); } } /*standard tractor-bounce web browser animation*/ @keyframes tractor-bounce { 50% { transform: rotate(-5deg) translatey(-3px); } }

html css animation

Comments

Post a Comment

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? - i want insert tables in infoboxes. example, have proteinbox i've developed using infobox template (http://health-and-medicine.wikia.com/wiki/template:proteinbox), , fasta field big fit comfortably in proteinbox. hence collapsible table within box. this tried: {{infobox | row 1 = {| class = "mw-collapsible mw-collapsed wikitable" |- | <!-- table content --> |} }} your problem is, putting nested table within template. pipe characters ( | ) in table syntax collides pipe usage in templates. the commonly used hack around create template called template:! , containing pipe character, , utilize when need set tables, parser functions or other stuff using pipe characters, within templates. table (with every | replaced {{!}} ): {{{!}} {{!}}- {{!}} a1 {{!}} b1 {{!}}- {{!}} a2 {{!}} b2 {{!}}} ...the equivalent of {| |- | a1 | b1 |- | a2 | b2 |} furthermore, hav...
Read more

Local Service User Logged into Windows -

Local Service User Logged into Windows - i created windows service tracks app server user connected through load balancer. it retrieves user logged windows on machine, cross references active directory (ad) business relationship homecoming first name, lastly name , e-mail (for notification through website created project) there 1 scheme on network users remote system, vista system, reason returning values "local service" logged machine, it's weird , security guys impossible "local service" business relationship logged windows. here how user logged windows managementscope ms = new managementscope("\\\\.\\root\\cimv2"); objectquery query = new objectquery("select * win32_computersystem"); managementobjectsearcher searcher = new managementobjectsearcher(ms, query); foreach (managementobject mo in searcher.get()) { _username = mo["username"].tostring(); } // remove domain part username string[] usernameparts = _...
Read more