Sea battle game only using HTML and CSS

Sea battle game only using HTML and CSS

Sea battle game only using HTML and CSS
Admin
Published on 2021-09-20 03:43:36

Sea battle game only using HTML and CSS

Where In this game we will build the game using only HTML and CSS tags and we do not use any javascript on this project 

Lets start with the first step 

step 1: Create a basic HTML format by using HTML tags with body tags and so on , create index.html file and paste the content in the files

<!DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        //content goes on 
</body>
</html>

Step 2: For battle sea war we will create HTML tags for first were in this tags contains the sea images using HTML and also contains the light in the images.

Index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="ag-sea-battle">
      <div class="ag-sea_box">
        <div class="ag-sea_ship ag-sea_ship__command-ship"></div>
        <div class="ag-sea_ship ag-sea_ship__heavy-cruiser"></div>
        <div class="ag-sea_ship ag-sea_ship__command-revert"></div>
        <div class="ag-sea_ship ag-sea_ship__heavy-revert"></div>
        <div class="ag-sea_aircraft ag-sea_aircraft__left"></div>
        <div class="ag-sea_aircraft ag-sea_aircraft__right"></div>
      </div>
      <div class="ag-format-container">
        <div class="ag-sea_runway">
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Step 3: Link a css tags for the html to add background images and animations etc for the html tags, Create style.css files and link to the html tags 

html code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="ag-sea-battle">
      <div class="ag-sea_box">
        <div class="ag-sea_ship ag-sea_ship__command-ship"></div>
        <div class="ag-sea_ship ag-sea_ship__heavy-cruiser"></div>
        <div class="ag-sea_ship ag-sea_ship__command-revert"></div>
        <div class="ag-sea_ship ag-sea_ship__heavy-revert"></div>
        <div class="ag-sea_aircraft ag-sea_aircraft__left"></div>
        <div class="ag-sea_aircraft ag-sea_aircraft__right"></div>
      </div>
      <div class="ag-format-container">
        <div class="ag-sea_runway">
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
          <div class="ag-sea_light"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Step 4: Add the design in the style.css where in this add the images background and animations for their images in the CSS tags 

style.css

.ag-format-container {
    width: 1142px;
    margin: 0 auto;
}

html,
body {
    height: 100%;

    overflow: hidden;
}

.ag-sea-battle {
    height: 100%;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bg.jpg) no-repeat scroll 50% 0;
    background-size: cover;
}

.ag-sea_box {
    padding: 200px 0 0;

    position: relative;
}

.ag-sea_ship {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ag-sea_ship.ag-sea_ship__command-ship {
    height: 5.0625em;
    width: 23.9375em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-left.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    top: 90%;
    left: 30%;

    -webkit-transform: translate(-50%, -50%) scaleX(-1);
    -moz-transform: translate(-50%, -50%) scaleX(-1);
    -ms-transform: translate(-50%, -50%) scaleX(-1);
    -o-transform: translate(-50%, -50%) scaleX(-1);
    transform: translate(-50%, -50%) scaleX(-1);

    -webkit-animation: an-go-command 7s ease-in-out forwards;
    -moz-animation: an-go-command 7s ease-in-out forwards;
    -o-animation: an-go-command 7s ease-in-out forwards;
    animation: an-go-command 7s ease-in-out forwards;
}

.ag-sea_ship.ag-sea_ship__command-ship::after {
    content: "";
    height: 4.9375em;
    width: 4.97656em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 30%;
    left: 70%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-command-burns 2s steps(7, start) 7s infinite;
    -moz-animation: an-command-burns 2s steps(7, start) 7s infinite;
    -o-animation: an-command-burns 2s steps(7, start) 7s infinite;
    animation: an-command-burns 2s steps(7, start) 7s infinite;
}

@keyframes an-command-burns {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

.ag-sea_ship.ag-sea_ship__command-ship::before {
    content: "";
    height: 3.75em;
    width: 3.75em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 20%;
    left: 71%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    -moz-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    -o-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    animation: an-smoke-command 3s steps(15, start) 7s infinite;
}

@keyframes an-smoke-command {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-go-command {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 35%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@-moz-keyframes an-go-command {
    0% {
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -moz-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 35%;

        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@-o-keyframes an-go-command {
    0% {
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -o-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 35%;

        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@keyframes an-go-command {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 35%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

.ag-sea_ship.ag-sea_ship__command-revert {
    height: 5.0625em;
    width: 23.9375em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-left.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    opacity: 0.3;

    top: 125%;
    left: 30%;

    -webkit-transform: translate(-50%, -50%) scale(-1, -1);
    -moz-transform: translate(-50%, -50%) scale(-1, -1);
    -ms-transform: translate(-50%, -50%) scale(-1, -1);
    -o-transform: translate(-50%, -50%) scale(-1, -1);
    transform: translate(-50%, -50%) scale(-1, -1);

    -webkit-animation: an-go-command_rev 7s ease-in-out forwards;
    -moz-animation: an-go-command_rev 7s ease-in-out forwards;
    -o-animation: an-go-command_rev 7s ease-in-out forwards;
    animation: an-go-command_rev 7s ease-in-out forwards;
}

.ag-sea_ship.ag-sea_ship__command-revert::after {
    content: "";
    height: 4.9375em;
    width: 4.97656em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 30%;
    left: 70%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-command-burns 2s steps(7, start) 7s infinite;
    -moz-animation: an-command-burns 2s steps(7, start) 7s infinite;
    -o-animation: an-command-burns 2s steps(7, start) 7s infinite;
    animation: an-command-burns 2s steps(7, start) 7s infinite;
}

@keyframes an-command-burns {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

.ag-sea_ship.ag-sea_ship__command-revert::before {
    content: "";
    height: 3.75em;
    width: 3.75em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 20%;
    left: 71%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    -moz-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    -o-animation: an-smoke-command 3s steps(15, start) 7s infinite;
    animation: an-smoke-command 3s steps(15, start) 7s infinite;
}

@keyframes an-smoke-command {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-go-command_rev {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
    }

    100% {
        top: 135%;
        left: 35%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@-moz-keyframes an-go-command_rev {
    0% {
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -moz-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
    }

    100% {
        top: 135%;
        left: 35%;

        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@-o-keyframes an-go-command_rev {
    0% {
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -o-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
    }

    100% {
        top: 135%;
        left: 35%;

        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@keyframes an-go-command_rev {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
    }

    100% {
        top: 135%;
        left: 35%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

.ag-sea_ship.ag-sea_ship__heavy-cruiser {
    height: 4.125em;
    width: 15.875em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-right.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    top: 90%;
    left: 70%;

    -webkit-transform: translate(-50%, -50%) scaleX(-1);
    -moz-transform: translate(-50%, -50%) scaleX(-1);
    -ms-transform: translate(-50%, -50%) scaleX(-1);
    -o-transform: translate(-50%, -50%) scaleX(-1);
    transform: translate(-50%, -50%) scaleX(-1);

    -webkit-animation: an-go-heavy 7s ease-in-out forwards;
    -moz-animation: an-go-heavy 7s ease-in-out forwards;
    -o-animation: an-go-heavy 7s ease-in-out forwards;
    animation: an-go-heavy 7s ease-in-out forwards;
}

.ag-sea_ship.ag-sea_ship__heavy-cruiser::after {
    content: "";
    height: 4.9375em;
    width: 4.97656em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 20%;
    left: 35%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    -moz-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    -o-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    animation: an-heavy-burns 2s steps(7, start) 7s infinite;
}

@keyframes an-heavy-burns {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

.ag-sea_ship.ag-sea_ship__heavy-cruiser::before {
    content: "";
    height: 3.75em;
    width: 3.75em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 0;
    left: 37%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    -moz-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    -o-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
}

@keyframes an-smoke-heavy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-go-heavy {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 60%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@-moz-keyframes an-go-heavy {
    0% {
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -moz-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 60%;

        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@-o-keyframes an-go-heavy {
    0% {
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -o-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 60%;

        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

@keyframes an-go-heavy {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
    }

    100% {
        top: 100%;
        left: 60%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
        transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
    }
}

.ag-sea_ship.ag-sea_ship__heavy-revert {
    height: 4.125em;
    width: 15.875em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-right.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    opacity: 0.3;

    top: 118%;
    left: 70%;

    -webkit-transform: translate(-50%, -50%) scale(-1, -1);
    -moz-transform: translate(-50%, -50%) scale(-1, -1);
    -ms-transform: translate(-50%, -50%) scale(-1, -1);
    -o-transform: translate(-50%, -50%) scale(-1, -1);
    transform: translate(-50%, -50%) scale(-1, -1);

    -webkit-animation: an-go-heavy_rev 7s ease-in-out forwards;
    -moz-animation: an-go-heavy_rev 7s ease-in-out forwards;
    -o-animation: an-go-heavy_rev 7s ease-in-out forwards;
    animation: an-go-heavy_rev 7s ease-in-out forwards;
}

.ag-sea_ship.ag-sea_ship__heavy-revert::after {
    content: "";
    height: 4.9375em;
    width: 4.97656em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 20%;
    left: 35%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    -moz-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    -o-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
    animation: an-heavy-burns 2s steps(7, start) 7s infinite;
}

@keyframes an-heavy-burns {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

.ag-sea_ship.ag-sea_ship__heavy-revert::before {
    content: "";
    height: 3.75em;
    width: 3.75em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
    background-size: auto 100%;

    opacity: 0;

    position: absolute;
    top: 0;
    left: 37%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    -moz-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    -o-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
    animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
}

@keyframes an-smoke-heavy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-go-heavy_rev {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
    }

    100% {
        top: 128%;
        left: 60%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@-moz-keyframes an-go-heavy_rev {
    0% {
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -moz-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
    }

    100% {
        top: 128%;
        left: 60%;

        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@-o-keyframes an-go-heavy_rev {
    0% {
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -o-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
    }

    100% {
        top: 128%;
        left: 60%;

        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

@keyframes an-go-heavy_rev {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
    }

    100% {
        top: 128%;
        left: 60%;

        -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
        transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
    }
}

.ag-sea_aircraft {
    height: 1.5625em;
    width: 2.8125em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/aircraft.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%) rotateZ(15deg);
    -moz-transform: translate(-50%, -50%) rotateZ(15deg);
    -ms-transform: translate(-50%, -50%) rotate(15deg);
    -o-transform: translate(-50%, -50%) rotateZ(15deg);
    transform: translate(-50%, -50%) rotateZ(15deg);
}

.ag-sea_aircraft.ag-sea_aircraft__left {
    top: 50%;
    left: -5%;

    -webkit-animation: an-fly-air-1 7s linear forwards;
    -moz-animation: an-fly-air-1 7s linear forwards;
    -o-animation: an-fly-air-1 7s linear forwards;
    animation: an-fly-air-1 7s linear forwards;
}

.ag-sea_aircraft.ag-sea_aircraft__left::after {
    content: "";
    height: 2.125em;
    width: 2.125em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bang.png) 0 100% no-repeat;
    background-size: auto 100%;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    -moz-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    -o-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    animation: an-bang-air 1s steps(24, start) 6.8s forwards;
}

@keyframes an-bang-air {
    99.99% {
        opacity: 1;
        background-position: 100% 100%;
    }

    100% {
        opacity: 0;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-fly-air-1 {
    0% {
        left: -10%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    49.99% {
        left: 110%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    50% {
        left: 110%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    70% {
        left: 75%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 62%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 62%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }
}

@-moz-keyframes an-fly-air-1 {
    0% {
        left: -10%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    49.99% {
        left: 110%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    50% {
        left: 110%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    70% {
        left: 75%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 62%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 62%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }
}

@-o-keyframes an-fly-air-1 {
    0% {
        left: -10%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    49.99% {
        left: 110%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    50% {
        left: 110%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    70% {
        left: 75%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 62%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 62%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }
}

@keyframes an-fly-air-1 {
    0% {
        left: -10%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    49.99% {
        left: 110%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    50% {
        left: 110%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    70% {
        left: 75%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 62%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 62%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
    }
}

.ag-sea_aircraft.ag-sea_aircraft__right {
    top: 55%;
    left: 105%;

    -webkit-animation: an-fly-air-2 7s linear forwards;
    -moz-animation: an-fly-air-2 7s linear forwards;
    -o-animation: an-fly-air-2 7s linear forwards;
    animation: an-fly-air-2 7s linear forwards;
}

.ag-sea_aircraft.ag-sea_aircraft__right::after {
    content: "";
    height: 2.125em;
    width: 2.125em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bang.png) 0 100% no-repeat;
    background-size: auto 100%;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    -moz-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    -o-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
    animation: an-bang-air 1s steps(24, start) 6.8s forwards;
}

@keyframes an-bang-air {
    99.99% {
        opacity: 1;
        background-position: 100% 100%;
    }

    100% {
        opacity: 0;
        background-position: 100% 100%;
    }
}

@-webkit-keyframes an-fly-air-2 {
    0% {
        left: 105%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    49.99% {
        left: -5%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    50% {
        left: -5%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    70% {
        left: 10%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 31%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 31%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }
}

@-moz-keyframes an-fly-air-2 {
    0% {
        left: 105%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    49.99% {
        left: -5%;

        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    50% {
        left: -5%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    70% {
        left: 10%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 31%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 31%;

        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }
}

@-o-keyframes an-fly-air-2 {
    0% {
        left: 105%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    49.99% {
        left: -5%;

        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    50% {
        left: -5%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    70% {
        left: 10%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 31%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 31%;

        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }
}

@keyframes an-fly-air-2 {
    0% {
        left: 105%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    49.99% {
        left: -5%;

        -webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
    }

    50% {
        left: -5%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    70% {
        left: 10%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
    }

    99.99% {
        opacity: 1;

        top: 100%;
        left: 31%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }

    100% {
        opacity: 0;

        top: 100%;
        left: 31%;

        -webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        -moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        -o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
        transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
    }
}

.ag-sea_runway {
    height: 7.3125em;
    width: 11.25em;
    margin-left: 4.375em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/launch-pad.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    position: absolute;
    left: 40%;
    bottom: 10%;
}

.ag-sea_light {
    height: 5.125em;
    width: 6.6875em;
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/light.png) 100% 100% no-repeat;
    background-size: 100% 100%;

    opacity: 1;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-animation: an-light 1s ease-in-out infinite;
    -moz-animation: an-light 1s ease-in-out infinite;
    -o-animation: an-light 1s ease-in-out infinite;
    animation: an-light 1s ease-in-out infinite;
}

.ag-sea_light:nth-child(odd) {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.ag-sea_light:nth-child(1) {
    top: -25%;
    left: 10%;

    -webkit-transform: translate(-50%, -50%) scaleX(-1);
    -moz-transform: translate(-50%, -50%) scaleX(-1);
    -ms-transform: translate(-50%, -50%) scaleX(-1);
    -o-transform: translate(-50%, -50%) scaleX(-1);
    transform: translate(-50%, -50%) scaleX(-1);
}

.ag-sea_light:nth-child(2) {
    top: -25%;
    left: 115%;
}

.ag-sea_light:nth-child(3) {
    top: 55%;
    left: 95%;
}

.ag-sea_light:nth-child(4) {
    top: 55%;
    left: -15%;

    -webkit-transform: translate(-50%, -50%) scaleX(-1);
    -moz-transform: translate(-50%, -50%) scaleX(-1);
    -ms-transform: translate(-50%, -50%) scaleX(-1);
    -o-transform: translate(-50%, -50%) scaleX(-1);
    transform: translate(-50%, -50%) scaleX(-1);
}

@-webkit-keyframes an-light {
    50% {
        opacity: 0;
    }
}

@-moz-keyframes an-light {
    50% {
        opacity: 0;
    }
}

@-o-keyframes an-light {
    50% {
        opacity: 0;
    }
}

@keyframes an-light {
    50% {
        opacity: 0;
    }
}


@media only screen and (max-width: 767px) {
    .ag-format-container {
        width: 96%;
    }

}

@media only screen and (max-width: 639px) {}

@media only screen and (max-width: 479px) {}

@media (min-width: 768px) and (max-width: 979px) {
    .ag-format-container {
        width: 750px;
    }

}

@media (min-width: 980px) and (max-width: 1161px) {
    .ag-format-container {
        width: 960px;
    }

}

At last, we will get the output for sea battle game animation like this:

Sea-battle-game-using-html-css

Happy coding atutorialhub.com......


 

ATutorialHub Related Guide

Comments (0)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

Recently Guide Posted

Tags

Sea battle game only using HTML and CSS game on HTML and CSS animation in css and html HTML and CSS game code Sea battle game without javascript