Lighthouse Animation

by mrjordy

HTML

<div class = "LeftLightContainer">
<div class = "LeftLightUpper"></div>
<div class = "LeftLightMid"></div>
<div class = "LeftLightLower"></div>
</div>
<div class = "RightLightContainer">
<div class = "RightLightUpper"></div>
<div class = "RightLightMid"></div>
<div class = "RightLightLower"></div>
</div>
<div class = "linething"></div>
<div class = "glowOrb"></div>
<div class = "glowOrbRed"></div>
<div class = "glowOrbRedSmall"></div>

CSS

body {
  background: #555;
  overflow: hidden;
  background: url('http://images.fineartamerica.com/images-medium-large-5/ocean-storm-panorama-matt-dobson.jpg');
  background-size: 100%;
}
.LeftLightContainer {
    height: 160px;
    position: absolute;
    width: 100%;
    transform: skewY(0deg);
    margin-top: 0;
    animation: LightHouseLeft 10s ease-in-out infinite;
    right: 19%;
}
@keyframes LightHouseLeft{
0% {
    transform: skewY(-5deg);
    margin-top: 50px;
    width: 0%;
}

25% {
    transform: skewY(0deg);
    margin-top: 20px;
    width: 100%;
}
50% {
    transform: skewY(5deg);
    margin-top: 5px;
    width: 0;
}
75% {
    transform: skewY(0deg);
    margin-top: 0px;
    width: 0%;
}
100% {
    transform: skewY(-5deg);
    margin-top: 35px;
    width: 0%;
}
}
@keyframes LightHouseRight{
0% {
    transform: skewY(-5deg);
    margin-top: 5px;
    width: 0%;
}
25% {
    transform: skewY(0deg);
    margin-top: 20px;
    width: 100%;
}
50% {
    transform: skewY(5deg);
    margin-top: 50px;
    width: 0;
}
75% {
    transform: skewY(0deg);
    margin-top: 0px;
    width: 0%;
}
100% {
    transform: skewY(5deg);
    margin-top: 0;
    width: 0%;
}
}

.LeftLightUpper {
  background: radial-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  height: 60px;
  width: 100%;
  position: absolute;
  transform: skewY(4deg);
  margin-top: -40px;
  opacity: .2;
}
.LeftLightMid {
  background: radial-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  height: 60px;
  width: 100%;
  position: absolute;
  transform: skewY(0);
}
.LeftLightLower {
  background: radial-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  height: 60px;;
  width: 100%;
  position:...