Skip to content

Instantly share code, notes, and snippets.

@anabelle
Created October 7, 2020 02:53
Show Gist options
  • Save anabelle/5d7de7bc07f8f121f8465b72154f0fb6 to your computer and use it in GitHub Desktop.
Save anabelle/5d7de7bc07f8f121f8465b72154f0fb6 to your computer and use it in GitHub Desktop.
.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; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment