CSS3 Animation plane demo with CSS clipart:

Position of Hello Kitty

A: move Hello Kitty left D:move Hello Kitty right (but will break animation in Firefox)

x:

y:

#plane_wrap{
animation-name: plane;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
			
keyframes plane {
from {
top:235px);
}
50%{
top:265px;
}
to {
top:230px;
}
}
			

Click here to go back to lpto.net

Show CSS code for hello kitty

.planedemo_wrap{
width: 800px;
height: 500px;
border: 1px dotted #171717;
position:relative;
background-color: lightblue;
background-image:-moz-linear-gradient(center top ,#A7D2FF,#D4E7FC,white); 
background-image:-o-linear-gradient(-90deg ,#A7D2FF,#D4E7FC,white); 
background-image:-webkit-gradient(linear, center top, center bottom, from(#A7D2FF), to(white)); 
overflow: hidden;
box-shadow:20px 20px 10px #C5C5C5;
-moz-box-shadow:20px 20px 10px #C5C5C5;
-webkit-box-shadow:20px 20px 10px #C5C5C5;
-o-box-shadow:20px 20px 10px #C5C5C5;
}


/* ...............<  start of plane:  >................... */
#plane_wrap{
position:absolute;
top:235px;
left:200px;
z-index: 90;
}

.plane_body{
background-color: #707070;
height: 70px;
width: 170px;
border: 1px solid black;
border-bottom: 25px ridge #6D6D6D;
border-left: 40px groove #6D6D6D;
border-radius: 100px 15px 15px 100px;
-moz-border-radius: 100px 15px 15px 100px;
-webkit-border-radius: 100px 15px 15px 100px;
-o-border-radius: 100px 15px 15px 100px;

box-shadow: 14px -20px 41px black inset;
-moz-box-shadow: 14px -20px 41px black inset;
-webkit-box-shadow: 14px -20px 41px black inset;
-o-box-shadow: 14px -20px 41px black inset;
}
.plane_body:before{ /*nose*/
background-color: #9A4C2F;

content: "";
display:block;
height: 20px;
left: -60px;
top: 35px;
position: relative;
width: 20px;
border: 1px solid black;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;

box-shadow: 1px -3px 7px black inset;
-moz-box-shadow: 1px -3px 7px black inset;
-webkit-box-shadow: 1px -3px 7px black inset;
-o-box-shadow: 1px -3px 7px black inset;
}
.plane_body:after{ /*tail*/
background-color: #707070;
content: "";
display: block;
height: 45px;
left: 170px;
position: absolute;
top: 3px;
width: 110px;
border: 1px solid black;
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
-o-transform: skew(45deg);

border-radius: 0 100px 22px 0;
-moz-border-radius: 0 100px 22px 0;
-webkit-border-radius: 0 100px 22px 0;
-o-border-radius: 0 100px 22px 0;

box-shadow: 1px 10px 30px black inset;
-moz-box-shadow: 1px 10px 30px black inset;
-webkit-box-shadow: 1px 10px 30px black inset;
-o-box-shadow: 1px 10px 30px black inset;
}
.plane_cockpit:after{ /*tail part 2*/

background-color: #656363;
border: 1px solid black;
border-left: 12px double #ADACAC;
border-top: 1px solid white;
border-bottom:20px ridge #6D6D6D;

content: "";
height: 28px;
left: 78px;
position: absolute;
top: 50px;
width: 110px;
z-index: 2;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
-o-transform: skew(-45deg);

border-radius: 0 22px 100px 0;
-moz-border-radius: 0 22px 100px 0;
-webkit-border-radius: 0 22px 100px 0;
-o-border-radius: 0 22px 100px 0;

box-shadow: 7px 3px 14px black inset;
-moz-box-shadow: 7px 3px 14px black inset;
-webkit-box-shadow: 7px 3px 14px black inset;
-o-box-shadow: 7px 3px 14px black inset;
}

.plane_cockpit:before{/*plane window*/
background-color: rgba(118, 35, 210, 0.7);
border-bottom: 4px ridge #5C5A5A;

border-right: 2px solid #B0ABAB;
border-top: 4px ridge #403E3E;
content: "";
height: 47px;
left: -19px;
position: absolute;
top: -17px;
width: 36px;
z-index: 80;

border-radius: 89px 19px 7px 93px;
-moz-border-radius: 89px 19px 7px 93px;
-webkit-border-radius: 89px 19px 7px 93px;
-o-border-radius: 89px 19px 7px 93px;
}
.plane_cockpit{
background-color: #202021;
border-bottom: 4px groove black;

height: 33px;
left: 85px;
position: absolute;
top: -4px;
width: 116px;
z-index: 30;

border-radius: 20px 20px 40px 40px;
-moz-border-radius: 20px 20px 40px 40px;
-webkit-border-radius: 20px 20px 40px 40px;
-o-border-radius: 20px 20px 40px 40px;
}
.wings{

background-color: #5C5C5C;
border-bottom: 6px ridge silver;

border-right: 44px ridge silver;
border-top: 4px double black;
height: 75px;
left: 102px;
position: absolute;
top: 72px;
width: 84px;
z-index: 40;
-moz-transform: skew(38deg);
-webkit-transform: skew(38deg);
-o-transform: skew(38deg);

border-radius: 10px 10px 40px 40px;
-moz-border-radius: 10px 10px 40px 40px;
-webkit-border-radius: 10px 10px 40px 40px;
-o-border-radius: 10px 10px 40px 40px;

box-shadow: 27px 6px 30px black inset;
-moz-box-shadow: 27px 6px 30px black inset;
-webkit-box-shadow: 27px 6px 30px black inset;
-o-box-shadow: 27px 6px 30px black inset;
}
.tailwings{

background-color: #515151;

border-top: 4px double black;
height: 40px;
left: 294px;
position: absolute;
top: 47px;
width: 75px;
z-index: 40;

-moz-transform: skew(34deg);
-webkit-transform: skew(34deg);
-o-transform: skew(34deg);

border-radius: 10px 10px 40px 40px;
-moz-border-radius: 10px 10px 40px 40px;
-webkit-border-radius: 10px 10px 40px 40px;
-o-border-radius: 10px 10px 40px 40px;

box-shadow: 7px 3px 14px black inset;
-moz-box-shadow: 7px 3px 14px black inset;
-webkit-box-shadow: 7px 3px 14px black inset;
-o-box-shadow: 7px 3px 14px black inset;
}
.tailwings:after{

background-color: #515151;
border-bottom: 4px double black;

border-right: 14px ridge Silver;
border-top: 11px groove silver;
content: "";
height: 44px;
left: 35px;
position: absolute;
top: -62px;
width: 56px;
z-index: 30;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
-o-transform: skew(-45deg);

border-radius: 40px 40px 10px 10px;
-moz-border-radius: 40px 40px 10px 10px;
-webkit-border-radius: 40px 40px 10px 10px;
-o-border-radius: 40px 40px 10px 10px;

box-shadow: 7px 3px 14px black inset;
-moz-box-shadow: 7px 3px 14px black inset;
-webkit-box-shadow: 7px 3px 14px black inset;
-o-box-shadow: 7px 3px 14px black inset;
}
.blades{
background-color: #8E8E8E;
height: 58px;
left: -16px;
position: relative;
top: -44px;
width: 6px;
border: 1px solid black;
border-right:4px ridge silver;

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.blades:before{
background-color: #8E8E8E;
content: "";
display: block;
height: 58px;
left: 0px;
position: relative;
top: -70px;
width: 6px;
border: 1px solid black;
border-right:4px ridge silver;

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.blade_move{
background-color: #8E8E8E;

height: 18px;
left: -16px;
position: relative;
top: -65px;
width: 6px;
border: 1px solid black;
border-right:4px ridge silver;
border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;

box-shadow: 1px 7px 27px black;
-moz-box-shadow: 1px 7px 27px black;
-webkit-box-shadow: 1px 7px 27px black;
-o-box-shadow: 1px 7px 27px black;
}
/* ...............<  Hello Kitty  >.................. */
.hellokitty_wrap{

}
.body{
background-color: #E6368D;
height: 50px;
left: 107px;
position: absolute;
top: -20px;
width: 83px;
z-index: 50;
border-left: 2px solid black;

border-radius: 100px 100px 40px 40px;
-moz-border-radius: 100px 100px 40px 40px;
-webkit-border-radius: 100px 100px 40px 40px;
-o-border-radius: 100px 100px 40px 40px;
}
.head{
background-color: white;
border: 2px solid black;
height: 108px;
left: 84px;
position: absolute;
top: -124px;
width: 133px;
z-index: 55;

-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-o-transform: rotate(12deg);

border-radius: 68px 68px 68px 68px;
-moz-border-radius: 68px 68px 68px 68px;
-webkit-border-radius: 68px 68px 68px 68px;
-o-border-radius: 68px 68px 68px 68px;
}
.head:before{/*left ear*/
border: 2px solid black;
border-bottom:none;
background-color: white;
content: "";
display: block;
height: 27px;
left: -8px;
position: absolute;
top: -7px;
width: 38px;
z-index: 55;
-moz-transform: rotate(-48deg);
-webkit-transform: rotate(-48deg);
-o-transform: rotate(-48deg);

border-radius: 55px 24px 9px 3px;
-moz-border-radius: 55px 24px 9px 3px;
-webkit-border-radius: 55px 24px 9px 3px;
-o-border-radius: 55px 24px 9px 3px;

}
.head:after{/*right ear*/
border: 2px solid black;
border-bottom: none;
background-color: white;
content: "";
display: block;
height: 32px;
left: 105px;
position: absolute;
top: -9px;
width: 41px;
z-index: 55;

-moz-transform: rotate(61deg);
-webkit-transform: rotate(61deg);
-o-transform: rotate(61deg);

border-radius: 31px 100px 1px 1px;
-moz-border-radius: 31px 100px 1px 1px;
-webkit-border-radius: 31px 100px 1px 1px;
-o-border-radius: 31px 100px 1px 1px;
}
.eyes{
background-color: black;

height: 15px;
left: 108px;
position: absolute;
top: -70px;
width: 11px;
z-index: 58;
-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-o-transform: rotate(12deg);

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.eyes:before{/*eye 2*/
background-color: black;
content: "";
display: block;
height: 15px;
left: 65px;
position: absolute;
top: 1px;
width: 12px;
z-index: 58;

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.eyes:after{/*nose*/
background-color: #FCECCB;
border: 2px solid black;
border-right: 3px solid black;
border-bottom: 3px solid black;
content: "";
display: block;
height: 8px;
left: 29px;
position: absolute;
top: 17px;
width: 12px;
z-index: 58;

-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.bow:before{/*middle*/
background-color: red;
border: 2px solid black;
content: "";
display: block;
height: 18px;
left: 16px;
position: absolute;
top: 18px;
width: 18px;
z-index: 60;

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
}
.bow:after{/*right side*/
background-color: red;
border: 2px solid black;

content: "";
display: block;
height: 28px;
left: 26px;
position: absolute;
top: 28px;
width: 26px;
z-index: 58;

border-radius: 3px 100px 74px 76px;
-moz-border-radius: 3px 100px 74px 76px;
-webkit-border-radius: 3px 100px 74px 76px;
-o-border-radius: 3px 100px 74px 76px;
}
.bow{/*left side*/
background-color: red;
border: 2px solid black;
height: 28px;
left: 177px;
position: absolute;
top: -125px;
width: 26px;
z-index: 60;

border-radius: 76px 74px 3px 100px;
-moz-border-radius: 76px 74px 3px 100px;
-webkit-border-radius: 76px 74px 3px 100px;
-o-border-radius: 76px 74px 3px 100px;
}

.arm{
background-color: #F5F5F5;
border: 1px solid black;
border-right: 24px solid #C20E68;
height: 30px;
left: 113px;
position: absolute;
top: -3px;
width: 34px;
z-index: 60;

border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;

-moz-transform: rotate(-26deg);
-webkit-transform: rotate(-26deg);
-o-transform: rotate(-26deg);
}
.arm:after{
border: 1px solid black;
border-bottom:none;
background-color: #F5F5F5;
content: "";
display: block;
height: 11px;
left: 4px;
position: absolute;
top: -7px;
width: 16px;
z-index: 50;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);

border-radius: 100px 100px 45px 27px;
-moz-border-radius: 100px 100px 45px 27px;
-webkit-border-radius: 100px 100px 45px 27px;
-o-border-radius: 100px 100px 45px 27px;
}
.whiskers_left{
border-top: 4px solid black;
height: 3px;
left: 63px;
position: absolute;
top: -73px;
width: 30px;
z-index: 60;

-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
-o-transform: rotate(16deg);

border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-o-border-radius: 5px 0 0 0;
}
.whiskers_left:before{
border-top: 4px solid black;
content: "";
display: block;
height: 3px;
left: 9px;
position: absolute;
top: 18px;
width: 30px;
z-index: 60;

-moz-transform: rotate(-23deg);
-webkit-transform: rotate(-23deg);
-o-transform: rotate(-23deg);

border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-o-border-radius: 5px 0 0 0;
}
.whiskers_left:after{
border-top: 4px solid black;
content: "";
display: block;
height: 3px;
left: 23px;
position: absolute;
top: 34px;
width: 30px;
z-index: 60;

-moz-transform: rotate(-39deg);
-webkit-transform: rotate(-39deg);
-o-transform: rotate(-39deg);

border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-o-border-radius: 5px 0 0 0;
}

.whiskers_right{
border-top: 4px solid black;
height: 3px;
left: 199px;
position: absolute;
top: -47px;
width: 34px;
z-index: 60;

-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
}
.whiskers_right:before{
border-top: 4px solid black;
content: "";
display: block;
height: 3px;
left: -4px;
position: absolute;
top: 10px;
width: 34px;
z-index: 60;

-moz-transform: rotate(23deg);
-webkit-transform: rotate(23deg);
-o-transform: rotate(23deg);

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
}
.whiskers_right:after{
border-top: 4px solid black;
content: "";
display: block;
height: 3px;
left: -15px;
position: absolute;
top: 23px;
width: 34px;
z-index: 60;

-moz-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
-o-transform: rotate(36deg);

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
}
/* ...............<  text for plane >.................. */
.text{
position: absolute;
}
.text:before{
color: #B7B6B6;
content: "..:::::lpto.net:::::..";
font-size: 14px;
left: 47px;
position: absolute;
text-shadow: 2px 2px 2px #010101;
top: -126px;
width: 110px;
}
.text:after{
-moz-transform: rotate(-128deg) skew(-32deg);
-webkit-transform: rotate(-128deg) skew(-32deg);
-o-transform: rotate(-128deg) skew(-32deg);
color: #94769C;
content: "Hello Kitty";
font-size: 18px;
left: 102px;
position: absolute;
text-shadow: 2px 2px 16px #080809;
top: -86px;
width: 110px;
z-index: 99;
}
/* ...............<  animations for plane wrap >.................. */
#plane_wrap{
-moz-animation-name: plane;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/*webkit*/
-webkit-animation-name: plane;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-moz-keyframes plane {
from {
top:235px);
}
50%{
top:265px;
}
to {
top:230px;
}
}
@-webkit-keyframes plane {
from {
top:235px);
}
50%{
top:265px;
}
to {
top:230px;
}
}
/* ...............<  blades >.................. */
.blade_move{
-moz-animation-name: blades;
-moz-animation-duration:150ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/*webkit*/
-webkit-animation-name: blades;
-webkit-animation-duration:150ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-moz-keyframes blades {
from {
top:-65px);
}
to {
top:-173px;
}
}
@-webkit-keyframes blades {
from {
top:-65px);
}
to {
top:-173px;
}
}
/* ...............<  background:  >.................. */
.background_wrap{

}
.clouds{
border:1px solid black;
background-color:white;
position:relative;
top:140px;
left: -50px;
width:150px;
height:50px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
.clouds:before{
border:1px solid black;
border-bottom:none;
background-color: white;
content: "";
display: block;
height: 70px;
left: 21px;
position: relative;
top: -38px;
width: 88px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
.clouds:after{
background-color: white;
border: 1px solid black;
border-bottom:none;
content: "";
display: block;
height: 50px;
left: 64px;
position: relative;
top: -87px;
width: 58px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
.clouds2{
border:1px solid black;
background-color:white;
opacity: 0.5;
position:relative;
top:347px;
left: 417px;
width:186px;
height:50px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
.clouds2:before{
border:1px solid black;
border-bottom:none;
background-color: white;
content: "";
display: block;
height: 70px;
left: 21px;
position: relative;
top: -38px;
width: 111px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
.clouds2:after{
background-color: white;
border: 1px solid black;
border-bottom:none;
content: "";
display: block;
height: 50px;
left: 64px;
position: relative;
top: -87px;
width: 86px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
}
/* ...............<  animations for clouds >.................. */
.clouds{
-moz-animation-name: clouds;
-moz-animation-duration:13s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* wwebkit*/
-webkit-animation-name: clouds;
-webkit-animation-duration:13s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-moz-keyframes clouds {
from {
left:-50px);
opacity:0.0;
}
30%{
opacity:0.8;
}
to {
left:850px;
}
}
/*webkit*/
@-webkit-keyframes clouds {
from {
left:-50px);
}
to {
left:850px;
}
}
/*cloud 2*/
.clouds2{
-moz-animation-name: clouds2;
-moz-animation-duration:13s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* wwebkit*/
-webkit-animation-name: clouds2;
-webkit-animation-duration:13s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-moz-keyframes clouds2 {
from {
left:417px);
}
35%{
left:890px;
opacity:0.0;
}
40%{
left:-100px;
opacity:0.0;
}
55%{
opacity:0.3;
}
80%{
opacity:0,8;
}
to {
left:417px;
}
}
/*webkit*/
@-webkit-keyframes clouds2 {
from {
left:417px);
}
35%{
left:890px;
opacity:0.0;
}
40%{
left:-100px;
opacity:0.0;
}
55%{
opacity:0.3;
}
80%{
opacity:0,8;
}
to {
left:417px;
}
}