Skip to content

Instantly share code, notes, and snippets.

@acv-hoanx acv-hoanx/dabblet.css forked from MadaraUchiha/dabblet.css
Last active Oct 20, 2018

Embed
What would you like to do?
Compressed Oval Animation
/* Compressed Oval Animation */
#oval {
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 25px;
height: 25px;
border-radius: 100%;
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
-o-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
-ms-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
-webkit-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
-moz-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
animation: icnLoad ease infinite 3.8s;
-o-animation: icnLoad ease infinite 3.8s;
-ms-animation: icnLoad ease infinite 3.8s;
-webkit-animation: icnLoad ease infinite 3.8s;
-moz-animation: icnLoad ease infinite 3.8s; }
@keyframes icnLoad {
0%,
100% {
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
}
25% {
box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
}
50% {
box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
}
75% {
box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
}
}
@-o-keyframes icnLoad {
0%,
100% {
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
}
25% {
box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
}
50% {
box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
}
75% {
box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
}
}
@-ms-keyframes icnLoad {
0%,
100% {
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
}
25% {
box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
}
50% {
box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
}
75% {
box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
}
}
@-webkit-keyframes icnLoad {
0%,
100% {
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
}
25% {
box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
}
50% {
box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
}
75% {
box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
}
}
@-moz-keyframes icnLoad {
0%,
100% {
box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
}
25% {
box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
}
50% {
box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
}
75% {
box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
}
}
<div id="oval">
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.