196 lines
3.0 KiB
CSS
196 lines
3.0 KiB
CSS
|
|
@-webkit-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-moz-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-ms-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-moz-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-o-keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes uil-ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0 0 0 0;
|
|
}
|
|
33% {
|
|
width: 44%;
|
|
height: 44%;
|
|
margin: -22% 0 0 -22%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin: -44% 0 0 -44%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.uil-ripple-css {
|
|
background: none;
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
.uil-ripple-css div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: 0;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
border-radius: 50%;
|
|
border-width: 12px;
|
|
border-style: solid;
|
|
-ms-animation: uil-ripple 2s ease-out infinite;
|
|
-moz-animation: uil-ripple 2s ease-out infinite;
|
|
-webkit-animation: uil-ripple 2s ease-out infinite;
|
|
-o-animation: uil-ripple 2s ease-out infinite;
|
|
animation: uil-ripple 2s ease-out infinite;
|
|
}
|
|
.uil-ripple-css div:nth-of-type(1) {
|
|
border-color: #afafb7;
|
|
}
|
|
.uil-ripple-css div:nth-of-type(2) {
|
|
border-color: #5cffd6;
|
|
-ms-animation-delay: 1s;
|
|
-moz-animation-delay: 1s;
|
|
-webkit-animation-delay: 1s;
|
|
-o-animation-delay: 1s;
|
|
animation-delay: 1s;
|
|
}
|