Start animation when page is loaded

The animation starts when you click on the button but it should start, when you load the page


<div id="flight" class="flight"></div>

<div class="runway">

<div class="runwayNo"></div>


<div class="controls">

<button onclick="simulate()">TAKE OFF</button>


<div class="twintowerblack"><img src="pics/[login to view URL]" alt="Twintower Schwarz"></div>


function simulate(){








.flight {

width: 200px;

height: 100px;

background: url("pics/[login to view URL]") center no-repeat;

background-size: 100%;

position: fixed;

bottom: -8px;

right: 0;


.[login to view URL] {

animation: landFlight linear 10s;


.runway {

width: 95%;

height: 1px;

border-top: 1px dotted #eee;

background: #333;

position: fixed;

bottom: 5px;

right: 0;


.runway .runwayNo {

position: absolute;

width: 50px;

color: #fff;

bottom: 23px;

left: -30px;

text-align: center;

padding: 5px 0;


.runway .runwayNo:after {

position: absolute;

height: 20px;

width: 10px;

border: 1px dotted #fff;

content: '';

bottom: -23px;

left: 18px;


@keyframes landFlight {

0% {

-ms-transform: translate(0, 0) rotate(0deg);

-moz-transform: translate(0, 0) rotate(0deg);

-webkit-transform: translate(0, 0) rotate(0deg);

transform: translate(0, 0) rotate(0deg);


20% {

-ms-transform: translate(-400px, -1px) rotate(0deg);

-moz-transform: translate(-400px, -1px) rotate(0deg);

-webkit-transform: translate(-400px, -1px) rotate(0deg);

transform: translate(-400px, -1px) rotate(0deg);


30% {

-ms-transform: translate(-450px, -2px) rotate(0deg);

-moz-transform: translate(-450px, -2px) rotate(0deg);

-webkit-transform: translate(-450px, -2px) rotate(0deg);

transform: translate(-450px, -2px) rotate(0deg);


38% {

-ms-transform: translate(-500px, -5px) rotate(10deg);

-moz-transform: translate(-500px, -5px) rotate(10deg);

-webkit-transform: translate(-500px, -5px) rotate(10deg);

transform: translate(-500px, -5px) rotate(10deg);


39% {

-ms-transform: translate(-510px, -10px) rotate(15deg);

-moz-transform: translate(-510px, -10px) rotate(15deg);

-webkit-transform: translate(-510px, -10px) rotate(15deg);

transform: translate(-510px, -10px) rotate(15deg);


40% {

-ms-transform: translate(-520px, -12px) rotate(20deg);

-moz-transform: translate(-520px, -12px) rotate(20deg);

-webkit-transform: translate(-520px, -12px) rotate(20deg);

transform: translate(-520px, -12px) rotate(20deg);


50% {

-ms-transform: translate(-600px, -50px) rotate(20deg);

-moz-transform: translate(-600px, -50px) rotate(20deg);

-webkit-transform: translate(-600px, -50px) rotate(20deg);

transform: translate(-600px, -50px) rotate(20deg);


60% {

-ms-transform: translate(-700px, -100px) rotate(20deg);

-moz-transform: translate(-700px, -100px) rotate(20deg);

-webkit-transform: translate(-700px, -100px) rotate(20deg);

transform: translate(-700px, -100px) rotate(20deg);


100% {

-ms-transform: translate(-2000px, -750px) rotate(20deg);

-moz-transform: translate(-2000px, -750px) rotate(20deg);

-webkit-transform: translate(-2000px, -750px) rotate(20deg);

transform: translate(-2000px, -750px) rotate(20deg);



.controls button {

border: 0;

outline: 0;

color: #000;

background: lightskyblue;


cursor: pointer;


Taidot: CSS, HTML5, Javascript, jQuery / Prototype, PHP

Näytä lisää: script click start page, start php page mysql admin, stop start animation, apply css page loaded, moss 2007 start job page, flash rollover start animation rollover stop, start animation onmouseover, start regestracion page plus, myspace flash animation page graphics, start thickbox page load, swishmax page loaded, create myspace background layout start blank page, php check page loaded frame, start script start set page, html mouseover start animation

Tietoa työnantajasta:
( 3 arvostelua ) Güstrow, Germany

Projektin tunnus: #16895121

Myönnetty käyttäjälle:


Hi! I CAN DO THIS NOW I am Expert in PHP,WORDPRESS,MYSQL,HTML5-HTML,JAVASCRIPT,CSS,AJAX etc..... I have 5+yr experience in developing as well as designing field... I can do this work easily and quickly..... Lisää

€5 EUR / tunti
(96 Arvostelua)

12 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_18% %project_currencyDetails_sign_sub_19%/tunti tähän työhön


Hello. I can modify the animation script to make it run on page load instead of button click. I am competent in JavaScript, HTML and CSS.

€6 EUR / tunti
(173 arvostelua)

hi sir, i will make the animation to start on page load, ready to do it right now, thanks................

€2 EUR / tunti
(435 arvostelua)
€4 EUR / tunti
(41 arvostelua)

Hello I can make your animation work on onload aswel just message me to start . Thank you Balouch Khan

€6 EUR / tunti
(69 arvostelua)

I have worked on similar projects to what you are looking for, and I am confident I can exceed your expectations. We can achieve the results that you are asking for. I have a few questions about your project, please Lisää

€3 EUR / tunti
(27 arvostelua)

Hello Hiring manager I have gone through your post and I am interested to work on it .As I have lot of experience in relevant field and I have 100% confidence to work on your project. Skill- Php, Magento, Larav Lisää

€5 EUR / tunti
(21 arvostelua)

A proposal has not yet been provided

€11 EUR / tunti
(8 arvostelua)
€5 EUR / tunti
(0 arvostelua)

It 's so easy to do [login to view URL] with me and I'll do it for you in just one hour. I am an expert in Java Script

€4 EUR / tunti
(0 arvostelua)
€2 EUR / tunti
(0 arvostelua)

I work primarily with font end hmtl/css/js /jQuery in my projects and often times handle animations in css and js. Without prior testing, it sounds like its probably an event listener issue and should be a relatively Lisää

€4 EUR / tunti
(1 arvostelu)