Dette er css for versjon 4.

Legg merke til bruk av :before og :after slik at vi får tre elementer som kan brukes til grafisk design av et tanks-ikon basert på en enkelt div med klassen tanks.

Vi har også laget en animasjon for hver tanks, forskjellen er at tanks2 har en delay på 7.5s før den starter.

Bare div med klassen (tanks OG intro) vil bli animert. Dermed stopper animasjonen når vi fjerner klassen intro fra tanksene.

#board {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: white;
    border: solid red 1px;
}

#melding {
    color: red;
    font-size:1.5em;
}

#melding p:first-letter {
    font-size: 2em;
    color: blue;
}

.startbutton {
    position: absolute;
    left: 220px;
    top: 220px;
}

.tanks.intro1 {
  animation: walk-about 15s linear infinite;
}

.tanks.intro2 {
  animation: walk-about 15s linear  infinite 7.5s;
}

@keyframes walk-about {
  0% {  visibility: visible;
        top: 30px;
        left: 30px; 
        transform: rotate(90deg);
      }

  25% { top: 445px;
        left: 30px; 
        transform: rotate(90deg);
      }
  28% { transform: rotate(0deg);}
  50% { top: 445px; 
        left: 445px;
        transform: rotate(0deg);
      }
  52% { transform: rotate(-90deg); }
  75% { top: 30px; 
        left: 445px;
        transform: rotate(-90deg);
      }
  78% { transform: rotate(-180deg); }
  97% { transform: rotate(-180deg);
       top: 30px;
       left: 30px;
   }
  100% { transform: rotate(-270deg); 
         top: 30px;
         left: 30px;
  }

}

.tanks {
    position: relative;
    width: 30px;
    height: 13px;
    background-color: blue;
    box-shadow: 2px 2px 2px rgba(10,10,10,0.4);
    border-bottom: solid 2px #008;
    border-radius: 2px;
    visibility: hidden;
}

.tanks:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 1px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #79b;
    box-shadow: 2px 2px 2px rgba(10,10,10,0.4);
    border-radius: 2px;
}

.tanks:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    display: block;
    width: 30px;
    height: 2px;
    background: linear-gradient(to top, #00c,#99c);
    box-shadow: 1px 1px 1px rgba(10,10,10,0.2);
}