forked from boyska/sito-hackit-22
80 lines
1.7 KiB
SCSS
80 lines
1.7 KiB
SCSS
|
/* pulse {{{ */
|
||
|
|
.pulse {
|
||
|
|
border-radius: 50%;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 0 0 rgba(255,255,255, 0);
|
||
|
|
animation: pulse 5s infinite;
|
||
|
|
}
|
||
|
|
.pulse:hover {
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes pulse {
|
||
|
|
0% {
|
||
|
|
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
-webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
23% {
|
||
|
|
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
26% {
|
||
|
|
-webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
29% {
|
||
|
|
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes pulse {
|
||
|
|
0% {
|
||
|
|
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
-moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
23% {
|
||
|
|
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
26% {
|
||
|
|
-moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
29% {
|
||
|
|
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* pulse }}} */
|
||
|
|
|
||
|
|
/* rotate {{{ */
|
||
|
|
.rotate {
|
||
|
|
animation: rotation 1s infinite ease-out;
|
||
|
|
}
|
||
|
|
@keyframes rotation {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(1440deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* rotate }}} */
|