+
When working with CSS animations, the main property to keep in mind is @keyframes! This is what sets up the motion for your animation.
+
+
Another important property used to create my CSS animations was z-index, which essentially assigns layer orders to the content of the animation.
+
+
WAVES
+
+
+
+
+
+
+
+
+
uhhh i don't feel so good
+
+
+
+
+
+
glow baby!
+
CSS Animations are great to use because they can add a greater sense of dynamism to your web page. They are a cool way to enhance your content and give users a more interesting experience.
+
+
+
+
+
+
diff --git a/css-showcase/css/main.css b/css-showcase/css/main.css
new file mode 100644
index 0000000..655267e
--- /dev/null
+++ b/css-showcase/css/main.css
@@ -0,0 +1,580 @@
+.container {
+ display: flex;
+}
+
+.container-one {
+ display: flex;
+ background-color: black;
+ align-items: center;
+}
+
+@media (max-width: 499px) {
+ .container-one {
+ display: flex;
+ flex-direction: column;
+ height: 800px;
+}
+
+/*first text*/
+
+.first-text {
+ height: 400px;
+}
+
+.loader-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: white;
+ font-family: Arial, sans-serif;
+ font-size: 30px;
+ margin: 0;
+ padding: 0;
+ width: 60%
+}
+}
+
+
+@media (min-width: 500px){
+.container-one {
+ background-color: black;
+ justify-content: space-around;
+ min-height: 300px;
+}
+
+.loader {
+ max-width: 15rem;
+ width: 100%;
+ height: auto;
+ stroke-linecap: round;
+}
+
+circle {
+ fill: none;
+ stroke-width: 4.5;
+ animation-name: preloader;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-in-out;
+ transform-origin: 170px 170px;
+ will-change: transform;
+
+}
+
+circle:nth-of-type(1) {
+ stroke-dasharray: 500;
+ animation-delay: .3s;
+}
+
+circle:nth-of-type(2) {
+ stroke-dasharray: 600;
+ animation-delay: .4s;
+}
+
+circle:nth-of-type(3) {
+ stroke-dasharray: 250;
+ animation-delay: .1s;
+}
+
+circle:nth-of-type(4) {
+ stroke-dasharray: 100;
+ animation-delay: .2s;
+}
+
+
+@keyframes preloader {
+ 50% {
+ transform: rotate(360deg);
+ }
+}
+
+
+
+
+/*first text*/
+
+.first-text {
+ height: 200px;
+ background-color: black;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loader-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: white;
+ font-family: Arial, sans-serif;
+ font-size: 30px;
+ margin: 0;
+ padding: 0;
+ width: 60%
+}
+
+/*text animation*/
+.container-two{
+ --color-background: #29284d;
+ --axis-x: 1px;
+ --axis-y: 1rem;
+ --delay: 10;
+
+ --color-black: #000;
+ --color-white: #fff;
+ --color-orange: #e86a1c;
+ --color-red: #e80023;
+ --color-violet: #8c00ab;
+ --color-blue: #0081f2;
+ --color-green: #007a2d;
+ --color-yellow: #ffbf00;
+
+ --color-foreground: var(--color-white);
+ --font-name: Arial;
+ background-color: var(--color-background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: var(--font-name);
+ height: 450px;
+}
+
+.c-rainbow {
+ counter-reset: rainbow;
+ position: relative;
+ display: block;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+
+.c-rainbow__layer {
+ --text-color: var(--color-foreground);
+ counter-increment: rainbow;
+ font-size: 3rem;
+ color: var(--text-color);
+ text-shadow: -1px -1px var(--color-black), 1px -1px 0 var(--color-black),
+ -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, 0.2);
+ animation: rainbow 1.5s ease-in-out infinite;
+ animation-delay: calc( #{$i} / var(--delay) * 1s);
+ left: calc(var(--axis-x) * #{$i});
+ z-index: -#{$i * 10};
+
+ }
+
+ .c-rainbow__layer:nth-of-type(1) {
+ animation-delay: .1s;
+ z-index: 7;
+ position: absolute;
+ width: 300px;
+ --white { --text-color: var(--color-white)}
+
+ }
+
+ .c-rainbow__layer:nth-of-type(2){
+ animation-delay: .2s;
+ z-index: 6;
+ position: absolute;
+ width: 300px;
+ color: #e80023;
+ --red { --text-color: var(--color-red)}
+
+ }
+
+ .c-rainbow__layer:nth-of-type(3) {
+ animation-delay: .3s;
+ z-index: 5;
+ position: absolute;
+ width: 300px;
+ color: #e86a1c;
+ --orange { --text-color: var(--color-orange)}
+ }
+ .c-rainbow__layer:nth-of-type(4) {
+ animation-delay: .4s;
+ z-index: 4;
+ position: absolute;
+ width: 300px;
+ color: #ffbf00;
+ --violet { --text-color: var(--color-violet)}
+ }
+.c-rainbow__layer:nth-of-type(5) {
+ animation-delay: .5s;
+ z-index: 3;
+ position: absolute;
+ width: 300px;
+ color: #007a2d;
+ --blue: { --text-color: var(--color-blue)};
+}
+.c-rainbow__layer:nth-of-type(6) {
+ animation-delay: .6s;
+ z-index: 2;
+ position: absolute;
+ width: 300px;
+ color: #0081f2;
+ --green: { --text-color: var(--color-green)};
+}
+.c-rainbow__layer:nth-of-type(7) {
+ animation-delay: .7s;
+ z-index: 1;
+ position: absolute;
+ width: 300px;
+ color: #8c00ab;
+ --yellow: { --text-color: var(--color-yellow)};
+}
+
+
+
+
+ @for $i from 1 through 7 {
+ &:nth-child(#{$i}) {
+ animation-delay: calc( #{$i} / var(--delay) * 1s);
+ left: calc(var(--axis-x) * #{$i});
+ z-index: -#{$i * 10};
+ }
+ }
+ &:not(:first-child) {
+ position: absolute;
+ top: 0;
+ }
+}
+
+.container-two ul li {
+ font-size: 40px;
+ text-decoration: none;
+ display: block;
+}
+
+@keyframes rainbow {
+ 0%, 100% {
+ transform: translateY(var(--axis-y));
+ }
+ 50% {
+ transform: translateY(calc(var(--axis-y) * -1));
+ }
+}
+
+/*first text*/
+
+.second-text {
+ height: 200px;
+ background-color: #bae1e6;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.more-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: black;
+ font-family: Arial, sans-serif;
+ font-size: 30px;
+ margin: 0;
+ padding: 0;
+ width: 60%;
+}
+
+
+
+/*bubbles*/
+.bubbles {
+ position: relative;
+ padding-top: 0;
+ top: 0;
+ left: 0;
+ height: 400px;
+ z-index: 0;
+ transform: translateZ(0);
+ background-color: #962a55;
+ z-index: 1;
+ overflow-y: hidden;
+ overflow-x: hidden;
+ margin: 0;
+}
+
+.bubble-text{
+ position: relative;
+ margin: 0;
+ padding: 0;
+ margin-top: 10%;
+ margin-left: 16%;
+ width: 60%;
+ display: flex;
+ z-index: 2;
+ transform: translateZ(2);
+ z-index: 3;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-size: 40px;
+ font-family: Arial, sans-serif;
+ text-shadow: 2px 2px #780749;
+}
+
+.bubbles li {
+ position: absolute;
+ list-style: none;
+ display: block;
+ background-color: #d65c8d;
+ bottom: -100px;
+ animation: square 15s infinite;
+ transition-timing-function: linear;
+}
+
+.bubbles li:nth-child(1) {
+ width: 40px;
+ height: 40px;
+ left: 20%;
+}
+
+.bubbles li:nth-child(2) {
+ width: 70px;
+ height: 70px;
+ left: 40%;
+ animation-delay: 6s;
+ animation-duration: 13s;
+}
+
+
+.bubbles li:nth-child(3) {
+ width: 25px;
+ height: 25px;
+ left: 60%;
+ animation-delay: 4s;
+ animation-duration: 10s;
+}
+
+
+.bubbles li:nth-child(4) {
+ width: 110px;
+ height: 110px;
+ left: 80%;
+ animation-delay: 2s;
+ animation-duration: 15s;
+}
+
+
+.bubbles li:nth-child(5) {
+ width: 90px;
+ height: 90px;
+ left: 50%;
+ animation-delay: 8s;
+ animation-duration: 7s;
+}
+
+.bubbles li:nth-child(6) {
+ width: 130px;
+ height: 130px;
+ left: 10%;
+ animation-delay: 10s;
+ animation-duration: 10s;
+}
+@keyframes square {
+ 0% {
+ transform: translateY(0);
+ }
+ 100% {
+ -webkit- transform: translateY(-500px) rotate(630deg);
+ transform: translateY(-1080px) rotate(630deg);
+ }
+
+}
+
+/*waves*/
+.container-four, h1 {
+ margin: 0;
+ padding: 0;
+ font-family: Arial;
+}
+
+.container-four h1 {
+ font-size: 200px;
+ color: rgba(225, 225, 225, .1);
+ background-image: url(https://www.financemagnates.com/wp-content/uploads/2018/01/waves-2903097_1280.jpg);
+ background-repeat: repeat-x;
+ -webkit-background-clip: text;
+ animation: animate 15s linear infinite;
+ margin-top: 6%;
+ margin-bottom: 6%;
+}
+
+@keyframes animate {
+ 0%{
+ background-position: left 0px top 10px;
+ }
+ 100%{
+ background-position: left 800px top 10px;
+ }
+}
+
+.container-four {
+
+ text-align: center;
+ height: 400px;
+}
+
+
+/*distortion*/
+.container-five {
+ margin:0;
+ padding: 0;
+ font-family: Arial;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 400px;
+ background-color: black;
+}
+
+.container-five h2 {
+ position: relative;
+ margin: 20px 0 0;
+ font-size: 4em;
+ font-weight: 900;
+ color: #fff;
+ z-index: 1;
+ overflow: hidden;
+ animation: linear infinite;
+
+}
+
+.container-five h2:before {
+ content: '';
+ position: absolute;
+ left: 120%;
+ width: 120%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
+ animation: distort 6s linear forwards;
+ animation-delay: 2s;
+
+}
+
+.container-five h2 span{
+ color: #ff022c;
+}
+
+video{
+ position: absolute;
+ top: 1200;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 2;
+ pointer-events: none;
+ mix-blend-mode: screen;
+
+
+}
+
+@keyframes distort {
+ 0% {
+ left: 100%;
+ }
+ 100%{
+ left: -20%;
+ }
+}
+
+/*glowing*/
+.container-six {
+ margin: 0;
+ padding: 0;
+ font-family: 'Nunito', Arial, sans-serif;
+ background: #12011c;
+ position: relative;
+ height: 400px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ flex-direction: column;
+}
+
+.container-six:before{
+ content: '';
+ position: absolute;
+ top: 0;
+ padding: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #00adff;
+ z-index: 1;
+ mix-blend-mode: color;
+ animation: neon 10s linear infinite;
+}
+
+
+.glowing {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ color: #fff;
+ font-size: 6em;
+ filter: blur(.5px);
+ font-weight: 100;
+ text-shadow: 0 0 10px rgba(255, 255, 255, 1),
+ 0 0 20px rgba(255, 255, 255, 1),
+ 0 0 40px rgba(255, 255, 255, 1),
+ 0 0 80px rgba(255, 255, 255, 1),
+ 0 0 160px rgba(255, 255, 255, 1),
+ ;
+}
+
+.glowing-small {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ padding-top: 10px;
+ width: 50%;
+ text-align: center;
+ color: #fff;
+ font-size: 20px;
+ filter: blur(.1px);
+ font-weight: 100;
+ text-shadow: 0 0 10px rgba(255, 255, 255, 1),
+ 0 0 20px rgba(255, 255, 255, 1),
+ 0 0 40px rgba(255, 255, 255, 1),
+ 0 0 80px rgba(255, 255, 255, 1),
+ 0 0 160px rgba(255, 255, 255, 1),
+ ;
+}
+
+
+@keyframes neon {
+ 0% {
+ filter: hue-rotate(0deg);
+ }
+ 100% {
+ filter: hue-rotate(360deg);
+ }
+}
+}
+
+
+@media(min-width: 501px) {
+.container-one{
+ justify-content: space-around;
+ min-height: 300px;
+}
+
+}
+
+
+
diff --git a/css-showcase/img/1*_laiUDqvJrVn5Skp8bpoSg.jpeg b/css-showcase/img/1*_laiUDqvJrVn5Skp8bpoSg.jpeg
new file mode 100644
index 0000000..d9e9858
Binary files /dev/null and b/css-showcase/img/1*_laiUDqvJrVn5Skp8bpoSg.jpeg differ
diff --git a/css-showcase/img/particles-two.mp4 b/css-showcase/img/particles-two.mp4
new file mode 100644
index 0000000..2405d8e
Binary files /dev/null and b/css-showcase/img/particles-two.mp4 differ
diff --git a/css-showcase/img/particles.mp4 b/css-showcase/img/particles.mp4
new file mode 100644
index 0000000..7e55e54
Binary files /dev/null and b/css-showcase/img/particles.mp4 differ