/* 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%); } }