layers_animation.css

.layers_container {
  margin-bottom: 10px;
  width: 100%;
  padding-top: 100%;
  height: 0;
  box-sizing: content-box;
  position: relative;
  transform: translateY(0);
}

.layers_container .layer {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 160ms linear;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:hover .layers_container .layer:nth-child(1) {
  animation: show-1 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:hover .layers_container .layer:nth-child(2) {
  animation: show-2 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:nth-child(3):hover .layers_container .layer:nth-child(2) {
  animation: show-2-blink 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul :hover .layers_container .layer:nth-child(3) {
  animation: show-3 6s;
  animation-iteration-count: infinite;
}

.page-id-22 .hexagonos-newrona-block-container ul li:nth-child(3):hover .layers_container .layer:nth-child(3) {
  animation: show-3-blink 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:hover .layers_container .layer:nth-child(4) {
  animation: show-4 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:hover .layers_container .layer:nth-child(5) {
  animation: show-5 6s;
  animation-iteration-count: infinite;
}

.hexagonos-newrona-block-container ul li:hover .layers_container .layer:nth-child(6) {
  animation: show-6 6s;
  animation-iteration-count: infinite;
}

@keyframes show-1 {
  0% { opacity:0; }
  16% { opacity:1; }
  100% { opacity:1; }
}

@keyframes show-2 {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:1; }
  100% { opacity:1; }
}

@keyframes show-2-blink {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:1; }
  48% { opacity:0; }
  100% { opacity:0; }
}

@keyframes show-3 {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:0; }
  48% { opacity:1; }
  100% { opacity:1; }
}

@keyframes show-3-blink {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:0; }
  48% { opacity:1; }
  64% { opacity:0; }
  100% { opacity:0; }
}

@keyframes show-4 {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:0; }
  48% { opacity:0; }
  64% { opacity:1; }
  100% { opacity:1; }
}

@keyframes show-5 {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:0; }
  48% { opacity:0; }
  64% { opacity:0; }
  80% { opacity:1; }
  100% { opacity:1; }
}

@keyframes show-6 {
  0% { opacity:0; }
  16% { opacity:0; }
  32% { opacity:0; }
  48% { opacity:0; }
  64% { opacity:0; }
  80% { opacity:0; }
  90% { opacity:1; }
  100% { opacity:1; }
}