Animated Boat | Learning Axis

HTML

CSS

body{
  text-align: center;
}
.container{
  display: inline-block;
  position: relative;
  top: 35vh;
  width: 120px;
  height: 100px;
  overflow: hidden;
}
.object{
  position: inherit;
  top: -246px;
  left: 30px;
  z-index: -10;
  transform: rotate(-5deg);
  animation: sail 2s infinite linear;
}
.boat{
  width: 50px;
  height: 40px;
  background-color: #666666;
  transform: perspective(50px) rotateX(-60deg);
}
.flag{
  background-color: #666666;
  width: 20px;
  height: 15px;
  transform: rotate(70deg) skew(45deg);
  position: relative;
  top: -43px;
  left: 13px;
}
.wave{
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid transparent;
}
#wave1, #wave3, #wave5, #wave7{
  background-color: white;
  border-top: 4px solid #666666;
  animation: flow 1s infinite linear;
}
#wave2, #wave4, #wave6, #wave8{
  border-bottom: 4px solid #666666;
  animation: flow 1s infinite linear;
}
#wave1{
  top: 76px;
  left: -22px;
}
#wave2{
  z-index: 1;
  top: 12px;
}
#wave3{
  top: 0px;
  left: 22px;
}
#wave4{
  z-index: 2;
  top: -64px;
  left: 44px;
}
#wave5{
  top: -76px;
  left: 66px;
}
#wave6{
  z-index: 3;
  top: -140px;
  left: 88px;
}
#wave7{
  top: -152px;
  left: 110px;
}
#wave8{
  top: -216px;
  left: 132px;
}
@keyframes flow {
  0%{
    transform: translate(0px);
  }
  100%{
    transform: translate(-44px);
  }
}
@keyframes sail {
  0%{
    transform: rotate(-5deg);
  }
  50%{
    transform: rotate(5deg);
  }
}