.canvas {
    background: url(image/clouds-tile.jpg);
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    z-index: 0;
}

.plaine {
    position: absolute;
    top: 300px;
    left: 400px;
    width: 200px;
    height: 198px;
    background-image: url(image/su25_top.png);
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 1;
    z-index: 100;
}

.plaine.left {
    background-image: url(image/su25_left.png);
}

.plaine.right {
    background-image: url(image/su25_right.png);
}

/*
.plaine.bad1 {
    background: url(image/plaineeBad1.png);
}

.plaine.bad2 {
    background: url(image/plaineeBad2.png);
}

.plaine.bad3 {
    background: url(image/plaineeBad3.png);
}

.plaine.bad4 {
    background: url(image/plaineeBad4.png);
}

.plaine.bad5 {
    background: url(image/plaineeBad5.png);
}

.plaine.bad6 {
    background: url(image/plaineeBad6.png);
}

.plaine.bad7 {
    background: url(image/plaineeBad7.png);
}

.plaine.bad8 {
    background: url(image/plaineeBad8.png);
}
*/
.rocket {
    position: absolute;
    top: 300px;
    left: -400px;
    width: 13px;
    height: 216px;
    background: url(image/rocket.png);
    overflow: hidden;
    z-index: 10;
}

.rocket.a1 {
    background: url(image/rocket1.png);
}

.explosion {
    position: absolute;
    top: 300px;
    left: -4000px;
    width: 200px;
    height: 200px;
    background: url(image/explosion.png);
    background-position: 0 0;
    overflow: hidden;
    opacity: .6;
    z-index: 1000;
}

.explosion.a1 {
    background-position: 0 0;
}

.explosion.a2 {
    background-position: -200px 0;
}

.explosion.a3 {
    background-position: -400px 0;
}

.explosion.a4 {
    background-position: 0 -200px;
}

.explosion.a5 {
    background-position: -200px -200px;
}

.explosion.a6 {
    background-position: -400px -200px;
}

.explosion.a7 {
    background-position: 0 -400px;
}

.explosion.a8 {
    background-position: -200px -400px;
}

.explosion.a9 {
    background-position: -400px -400px;
}



.cloud1 {
    position: absolute;
    top: 300px;
    left: -4000px;
    width: 600px;
    height: 300px;
    background: url(image/cloud1.png);
    overflow: hidden;
    opacity: .3;
    z-index: 1000;
}

.cloud2 {
    position: absolute;
    top: 300px;
    left: -4000px;
    width: 600px;
    height: 300px;
    background: url(image/cloud2.png);
    overflow: hidden;
    opacity: .3;
    z-index: 1000;
}
.enemy {
    position: absolute;
    top: 300px;
    left: 400px;
    width: 150px;
    height: 100px;
    background: url(image/enemy.png);
    overflow: hidden;
    z-index: 200;
}

.enemy.dying {
    animation: rotates 3s infinite;
}

@-webkit-keyframes rotates {
    100% {
        -webkit-transform: rotate(360deg) scale(0.0);
    }
}

/* Standard syntax */
@keyframes rotates {
    100% {
        transform: rotate(360deg) scale(0.0);
    }
}