116 lines
2 KiB
CSS
116 lines
2 KiB
CSS
|
|
||
|
|
/* used for background */
|
||
|
|
@keyframes diag {
|
||
|
|
from {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
background-position: 10% 10%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* used for title */
|
||
|
|
@keyframes bounce {
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform:translateY(-25%);
|
||
|
|
animation-timing-function:cubic-bezier(.8,0,1,1)
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform:none;
|
||
|
|
animation-timing-function:cubic-bezier(0,0,.2,1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* used in footer videos */
|
||
|
|
@keyframes flip {
|
||
|
|
0%, 100% {
|
||
|
|
transform: rotateY(0deg) rotateX(0deg);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: rotateY(3000deg) rotateX(3000deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* used in ie button */
|
||
|
|
@keyframes strobe {
|
||
|
|
0%, 100% {
|
||
|
|
background-color: rgba(255,0,0,.4);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
background-color: rgba(255,255,0,.4);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
background-color: rgba(0,255,0,.4);
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
background-color: rgba(0,255,255,.4);
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
background-color: rgba(0,0,255,.4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* LITHIUM ION BATTERIES!!! */
|
||
|
|
@keyframes cube {
|
||
|
|
from {
|
||
|
|
transform: translateX(-50%) rotateY(var(--rot)) translateZ(calc(var(--width)/2));
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translateX(-50%) rotateY(calc(var(--rot) + 90deg)) translateZ(calc(var(--width)/2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* used in motd */
|
||
|
|
@keyframes flash {
|
||
|
|
50% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes colorflash {
|
||
|
|
0%, 100%, 49% {
|
||
|
|
border: 5px solid orange;
|
||
|
|
background-color: black;
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
50%, 99% {
|
||
|
|
border: 5px solid black;
|
||
|
|
background-color: orange;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes border {
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
border: 2px solid rgb(255, 0, 0);
|
||
|
|
}
|
||
|
|
33% {
|
||
|
|
border: 2px solid rgb(0, 255, 0);
|
||
|
|
}
|
||
|
|
66% {
|
||
|
|
border: 2px solid rgb(0, 0, 255);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes across {
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateX(0%);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translateX(calc(80vw - 100%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scale {
|
||
|
|
from {
|
||
|
|
transform: scale3d(100%, 100%, 100%);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: scale3d(120%, 120%, 120%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|