Hello all,

Below is an example of pure CSS3 game using CSS3 animation. This example show efficiency of CSS3.

Below is the sample of flying plane game.

CSS:-

* {margin: 0;padding: 0;}
.board {width: 300px;height: 600px;margin:20px auto 0 !important;background: #0d2704;cursor: url(https://cdn3.iconfinder.com/data/icons/flat-icons-big-sized/64/plane-20.png),pointer;position: relative;overflow: hidden;}
.board .enemy:hover {height: 600px;width: 300px;position: absolute;top: 0;left:0;z-index: 999;background: #000;overflow: visible;cursor:not-allowed;
    animation: animation 0s 0s linear infinite !important; -webkit-animation: animation 0s 0s linear infinite !important; }
.board .enemy:hover:after{content: 'GAME OVER';display: block;text-align: center;top:240px;position: relative;}
.enemy {height: 20px;width: 20px;position: absolute;top: -30px;left: 0;background: url(http://54.160.13.227/imgM/plane-20.png) no-repeat;color: #fff;}
.enemy.eme2{left:40px;}
.enemy.eme3{left:80px;}
.enemy.eme4{left:120px;}
.enemy.eme5{left:160px;}
.enemy.eme6{left:200px;}
.enemy.eme7{left:240px;}
.enemy.eme8{left:280px;}
.enemy.eme22{left:20px;}
.enemy.eme33{left:60px;}
.enemy.eme44{left:100px;}
.enemy.eme55{left:140px;}
.enemy.eme66{left:180px;}
.enemy.eme77{left:220px;}
.enemy.eme88{left:260px;}
.board:hover .enemy {animation: animationt 1s 3s linear infinite;-webkit-animation: animationt 1s 3s linear infinite;}
.board:hover .enemy.eme2 {animation: animationt 2s 7s linear infinite;-webkit-animation: animationt 2s 7s linear infinite;}
.board:hover .enemy.eme3 {animation: animationt 700ms 6s linear infinite;-webkit-animation: animationt 700ms 6s linear infinite;}
.board:hover .enemy.eme4 {animation: animationt 1s 2s linear infinite;-webkit-animation: animationt 1s 2s linear infinite;}
.board:hover .enemy.eme5 {animation: animationt 3s 500ms linear infinite;-webkit-animation: animationt 3s 500ms linear infinite;}
.board:hover .enemy.eme6 {animation: animationt 4s 1s linear infinite;-webkit-animation: animationt 4s 1s linear infinite;}
.board:hover .enemy.eme7 {animation: animationt 5s 3s linear infinite;-webkit-animation: animationt 5s 3s linear infinite;}
.board:hover .enemy.eme8 {animation: animationt 6s 5s linear infinite;-webkit-animation: animationt 6s 5s linear infinite;}
.board:hover .enemy.eme22 {animation: animationt 3s 6s linear infinite;-webkit-animation: animationt 3s 6s linear infinite;}
.board:hover .enemy.eme33 {animation: animationt 1s 8s linear infinite;-webkit-animation: animationt 1s 8s linear infinite;}
.board:hover .enemy.eme44 {animation: animationt 5s 4s linear infinite;-webkit-animation: animationt 5s 4s linear infinite;}
.board:hover .enemy.eme55 {animation: animationt 6s 1s linear infinite;-webkit-animation: animationt 6s 1s linear infinite;}
.board:hover .enemy.eme66 {animation: animationt 700ms 5s linear infinite;-webkit-animation: animationt 700ms 5s linear infinite;}
.board:hover .enemy.eme77 {animation: animationt 8s 4s linear infinite;-webkit-animation: animationt 8s 4s linear infinite;}
.board:hover .enemy.eme88 {animation: animationt 3s 6s linear infinite;-webkit-animation: animationt 3s 6s linear infinite;}
@keyframes animation {0% {top: -10%;} 100% {top: 100%;}}@keyframes animationt {0% {top: -10%;} 100% {top: 100%;}}
@-webkit-keyframes animation {0% {top: -10%;}100% {top: 100%;}}@-webkit-keyframes animationt {0% {top: -10%;}
    100% {top: 100%;}}

HTML:-

    <div class="board">
        <p class="enemy"></p>
        <p class="enemy eme2"></p>
        <p class="enemy eme3"></p>
        <p class="enemy eme4"></p>
        <p class="enemy eme5"></p>
        <p class="enemy eme6"></p>
        <p class="enemy eme7"></p>
        <p class="enemy eme8"></p>
        <p class="enemy eme22"></p>
        <p class="enemy eme33"></p>
        <p class="enemy eme44"></p>
        <p class="enemy eme55"></p>
        <p class="enemy eme66"></p>
        <p class="enemy eme77"></p>
        <p class="enemy eme88"></p>
    </div>
<audio src="http://66.90.91.26/ost/planet-51-soundtrack/sihenryjne/canal-journey.mp3" loop="" autoplay=""></div>

Out put:-