diff --git a/source/fading_exits/fadeSmoke.css b/source/fading_exits/fadeSmoke.css new file mode 100644 index 000000000..7ea6322aa --- /dev/null +++ b/source/fading_exits/fadeSmoke.css @@ -0,0 +1,28 @@ + .animate__fadeSmoke + { + -webkit-animation-name: fadeSmoke; + animation-name: fadeSmoke; + -webkit-animation-duration: 1s; + animation-duration: 1s; + } + + @keyframes fadeSmoke + { + 0% + { +filter: blur(0px); +transform: scaleY(1)translateY(0px); +opacity: 1; + } + 90% + { +filter: blur(10px); +transform: scaleY(1.2)translateY(-20px); + + + } + 100% + { + opacity: 0; + } + } \ No newline at end of file diff --git a/source/flippers/flipBounce.css b/source/flippers/flipBounce.css new file mode 100644 index 000000000..26d80fe5a --- /dev/null +++ b/source/flippers/flipBounce.css @@ -0,0 +1,38 @@ + .animate__flipBounce + { + display: flex; + align-items: center; + transform-style: preserve-3d; + perspective-origin: 30% 50%; + perspective: 1000px !important; + position: relative; + } + + .animate__flipBounce::after + { + content:attr(data-content); + transform-origin: 50% 100%; + display: block; + -webkit-animation-name: flipBounce; + animation-name: flipBounce; + -webkit-animation-duration: 1s; + animation-duration: 1s; + top: 0; + left: 0; + + } + @keyframes flipBounce + { + 30% + { + transform: rotateX(96deg); + } + 60% + { + transform: rotateX(-20deg); + } + 100% + { + transform: rotateX(0deg); + } + } diff --git a/source/specials/glitch.css b/source/specials/glitch.css new file mode 100644 index 000000000..622113311 --- /dev/null +++ b/source/specials/glitch.css @@ -0,0 +1,47 @@ + .animate__glitch + { + position: relative; + background: inherit; !important; + text-shadow: -3px 0 #F40102,-5px 0 #FBF700,2px 0 #0002FC,5px 0 #00F8FB; + } + + .animate__glitch::after,.animate__glitch::before + { + content:attr(data-glitch); + position: absolute; + top: 0; + left: 0; + color: inherit !important; + text-shadow:none; + } + + .animate__glitch::after + { + transform: translateX(2px); + background: inherit !important; + clip-path: polygon(0 0,100% 0,100% 30%,0 100%); + animation: glitch 0.2s 0.5s infinite; + -webkit-animation:glitch 0.2s 0.5s infinite; + } + + .animate__glitch::before + { + transform: translateX(-3px); + background: inherit !important; + clip-path: polygon(0 60%,100% 0%,100% 100%,0 100%); + animation: glitch 0.2s infinite linear alternate; + -webkit-animation: glitch 0.2s infinite linear alternate; + } + + @keyframes glitch + { + from + { + opacity: 0; + } + to + { + opacity: 1; + + } + }