Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
body { height: 100vh; } .cont { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; } .dots { width: 15px; height: 15px; border-radius: 50%; position: absolute; transform: translate(0px,0px); } .d1 { transform: rotate(0deg) translateX(80px); background: #ff7171; animation: orbit1 2.5s ease-in-out infinite alternate; z-index: 10; } .d2 { transform: rotate(-90deg) translateX(80px); background: #377b37; animation: orbit2 2.5s ease-in-out infinite alternate; z-index: 8; } .d3 { transform: rotate(180deg) translateX(80px); background: #afaf29; animation: orbit3 2.5s ease-in-out infinite alternate; z-index: 6; } .d4 { transform: rotate(90deg) translateX(80px); background: #7a5afb; animation: orbit4 2.5s ease-in-out infinite alternate; z-index: 4; } .d5 { transform: rotate(135deg) translateX(80px); background: #e62575; animation: orbit5 2.5s ease-in-out infinite alternate; z-index: 5; } .d6 { transform: rotate(225deg) translateX(80px); background: #967e77; animation: orbit6 2.5s ease-in-out infinite alternate; z-index: 7; } .d7 { transform: rotate(315deg) translateX(80px); background: #d432c7; animation: orbit7 2.5s ease-in-out infinite alternate; z-index: 9; } .d8 { transform: rotate(405deg) translateX(80px); background: #00bcd4; animation: orbit8 2.5s ease-in-out infinite alternate; z-index: 3; } @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(80px) scale(1,1); } 100% { transform: rotate(360deg) translateX(0px) scale(1.2,1.2); } } @keyframes orbit2 { 0% { transform: rotate(-90deg) translateX(80px) scale(1,1); } 100% { transform: rotate(270deg) translateX(0px) scale(1.6,1.6); } } @keyframes orbit3 { 0% { transform: rotate(180deg) translateX(80px) scale(1,1); } 100% { transform: rotate(540deg) translateX(0px) scale(2,2); } } @keyframes orbit4 { 0% { transform: rotate(90deg) translateX(80px) scale(1,1); } 100% { transform: rotate(450deg) translateX(0px) scale(2.4,2.4); } } @keyframes orbit5 { 0% { transform: rotate(135deg) translateX(80px) scale(1,1); } 100% { transform: rotate(495deg) translateX(0px) scale(2.2,2.2); } } @keyframes orbit6 { 0% { transform: rotate(225deg) translateX(80px) scale(1,1); } 100% { transform: rotate(585deg) translateX(0px) scale(1.8,1.8); } } @keyframes orbit7 { 0% { transform: rotate(315deg) translateX(80px) scale(1,1); } 100% { transform: rotate(675deg) translateX(0px) scale(1.4,1.4); } } @keyframes orbit8 { 0% { transform: rotate(405deg) translateX(80px) scale(1,1); } 100% { transform: rotate(765deg) translateX(0px) scale(2.6,2.6); } }
56
Circle(dots) css animation loader
By:
rald_dev
html, body { width: 100%; height: 100%; background-color: #333; } .c-scrolldown { width: 1px; height: 60px; position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto; overflow: hidden; } .c-scrolldown .c-line { width: 100%; height: 100%; display: block; background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 -60px; background-size: 100% 200%; animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; } @keyframes scrolldown { 0% { background-position: 0 -60px; } 75% { background-position: 0 0; } 100% { background-position: 0 60px; } }
55
scroll down line animation
By:
rald_dev
*{ padding: 0; margin: 0; font-family: 'Quicksand', sans-serif; } body{ background:#40739e; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 5px; overflow: hidden; } .container span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: inline-block; animation: animate 10s infinite linear; } @keyframes animate{ 0%{ transform: translateX(-100%); } 50%{ transform: translateX(100%); } 100%{ transform: translateX(-100%); } }
54
Line Loading Animation
By:
rald_dev
.wrapper { position: absolute; left: 50%; top: 70%; transform: scale(1.5, 1.5) translate(-50%, -50%); } .floor { position: absolute; left: 50%; top: 50%; width: 350px; height: 5px; background: #673C63; transform: translate(-50%, -50%); box-shadow: 0px 2px 5px #111; z-index: 2; } .candles { position: absolute; left: 50%; top: 50%; width: 250px; height: 150px; transform: translate(-50%, -100%); z-index: 1; } .candle1 { position: absolute; left: 50%; top: 50%; width: 35px; height: 100px; background: #fff; border: 3px solid #673C63; border-bottom: 0px; border-radius: 3px; transform-origin: center right; transform: translate(60%, -25%); box-shadow: -2px 0px 0px #95c6f2 inset; animation: expand-body 3s infinite linear; } .candle1__stick, .candle2__stick { position: absolute; left: 50%; top: 0%; width: 3px; height: 15px; background: #673C63; border-radius: 8px; transform: translate(-50%, -100%); } .candle2__stick { height: 12px; transform-origin: bottom center; animation: stick-animation 3s infinite linear; } .candle1__eyes, .candle2__eyes { position: absolute; left: 50%; top: 0%; width: 35px; height: 30px; transform: translate(-50%, 0%); } .candle1__eyes-one { position: absolute; left: 30%; top: 20%; width: 5px; height: 5px; border-radius: 100%; background: #673C63; transform: translate(-70%, 0%); animation: blink-eyes 3s infinite linear; } .candle1__eyes-two { position: absolute; left: 70%; top: 20%; width: 5px; height: 5px; border-radius: 100%; background: #673C63; transform: translate(-70%, 0%); animation: blink-eyes 3s infinite linear; } .candle1__mouth { position: absolute; left: 40%; top: 20%; width: 0px; height: 0px; border-radius: 20px; background: #673C63; transform: translate(-50%, -50%); animation: uff 3s infinite linear; } .candle__smoke-one { position: absolute; left: 30%; top: 50%; width: 30px; height: 3px; background: grey; transform: translate(-50%, -50%); animation: move-left 3s infinite linear; } .candle__smoke-two { position: absolute; left: 30%; top: 40%; width: 10px; height: 10px; border-radius: 10px; background: grey; transform: translate(-50%, -50%); animation: move-top 3s infinite linear; } .candle2 { position: absolute; left: 20%; top: 65%; width: 42px; height: 60px; background: #fff; border: 3px solid #673C63; border-bottom: 0px; border-radius: 3px; transform: translate(60%, -15%); transform-origin: center right; box-shadow: -2px 0px 0px #95c6f2 inset; animation: shake-left 3s infinite linear; } .candle2__eyes-one { position: absolute; left: 30%; top: 50%; width: 5px; height: 5px; display: inline-block; border: 0px solid #673C63; border-radius: 100%; float: left; background: #673C63; transform: translate(-80%, 0%); animation: changeto-lower 3s infinite linear; } .candle2__eyes-two { position: absolute; left: 70%; top: 50%; width: 5px; height: 5px; display: inline-block; border: 0px solid #673C63; border-radius: 100%; float: left; background: #673C63; transform: translate(-80%, 0%); animation: changeto-greater 3s infinite linear; } .light__wave { position: absolute; top: 35%; left: 35%; width: 75px; height: 75px; border-radius: 100%; z-index: 0; transform: translate(-25%, -50%) scale(2.5, 2.5); border: 2px solid rgba(255, 255, 255, 0.2); animation: expand-light 3s infinite linear; } .candle2__fire { position: absolute; top: 50%; left: 40%; display: block; width: 16px; height: 20px; background-color: red; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #FF9800; transform: translate(-50%, -50%); animation: dance-fire 3s infinite linear; } @keyframes blink-eyes { 0%,35% { opacity: 1; transform: translate(-70%, 0%); } 36%,39% { opacity: 0; transform: translate(-70%, 0%); } 40% { opacity: 1; transform: translate(-70%, 0%); } 50%,65% { transform: translate(-140%, 0%); } 66% { transform: translate(-70%, 0%); } } @keyframes expand-body { 0%,40% { transform: scale(1, 1) translate(60%, -25%); } 45%,55% { transform: scale(1.1, 1.1) translate(60%, -28%); } 60% { transform: scale(0.89, 0.89) translate(60%, -25%); } 65% { transform: scale(1, 1) translate(60%, -25%); } 70% { transform: scale(0.95, 0.95) translate(60%, -25%); } 75% { transform: scale(1, 1) translate(60%, -25%); } } @keyframes uff { 0%,40% { width: 0px; height: 0px; } 50%,54% { width: 15px; height: 15px; left: 30%; } 59% { width: 5px; height: 5px; left: 20%; } 62% { width: 2px; height: 2px; left: 20%; } 67% { width: 0px; height: 0px; left: 30%; } } @keyframes change-background { 0%,59%,98%,100% { background: #FFF; } 61%,97% { background: #000; } } @keyframes move-left { 0%,59%,100% { width: 0px; left: 40%; } 60% { width: 30px; left: 30%; } 68% { width: 0px; left: 20%; } } @keyframes move-top { 0%,64%,100% { width: 0px; height: 0px; top: 0%; } 65% { width: 10px; height: 10px; top: 40%; left: 40%; } 80% { width: 0px; height: 0px; top: 20%; } } @keyframes shake-left { 0%,40% { left: 20%; transform: translate(60%, -15%); } 50%,54% { left: 20%; transform: translate(60%, -15%); } 59% { left: 20%; transform: translate(60%, -15%); } 62% { left: 18%; transform: translate(60%, -15%); } 65% { left: 21%; transform: translate(60%, -15%); } 67% { left: 20%; transform: translate(60%, -15%); } 75% { left: 20%; transform: scale(1.15, 0.85) translate(60%, -15%); background: #fff; border-color: #673C63; } 91% { left: 20%; transform: scale(1.18, 0.82) translate(60%, -10%); background: #F44336; border-color: #F44336; box-shadow: -2px 0px 0px #F44336 inset; } 92% { left: 20%; transform: scale(0.85, 1.15) translate(60%, -15%); } 95% { left: 20%; transform: scale(1.05, 0.95) translate(60%, -15%); } 97% { left: 20%; transform: scale(1, 1) translate(60%, -15%); } } @keyframes stick-animation { 0%,40% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 50%,54% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 59% { left: 50%; top: 0%; transform: translate(-50%, -100%); } 62% { left: 50%; top: 0%; transform: rotateZ(-15deg) translate(-50%, -100%); } 65% { left: 50%; top: 0%; transform: rotateZ(15deg) translate(-50%, -100%); } 70% { left: 50%; top: 0%; transform: rotateZ(-5deg) translate(-50%, -100%); } 72% { left: 50%; top: 0%; transform: rotateZ(5deg) translate(-50%, -100%); } 74%,84% { left: 50%; top: 0%; transform: rotateZ(0deg) translate(-50%, -100%); } 85% { transform: rotateZ(180deg) translate(0%, 120%); } 92% { left: 50%; top: 0%; transform: translate(-50%, -100%); } } @keyframes expand-light { 10%,29%,59%,89% { transform: translate(-25%, -50%) scale(0, 0); border: 2px solid rgba(255, 255, 255, 0); } 90%,20%,50% { transform: translate(-25%, -50%) scale(1, 1); } 95%,96%,26%,27%,56%,57% { transform: translate(-25%, -50%) scale(2, 2); border: 2px solid rgba(255, 255, 255, 0.5); } 0%,28%,58%,100% { transform: translate(-25%, -50%) scale(2.5, 2.5); border: 2px solid rgba(255, 255, 255, 0.2); } } @keyframes dance-fire { 59%,89% { left: 40%; width: 0px; height: 0px; } 90%,0%,7%,15%,23%,31%,39%,47%,55% { left: 40.8%; width: 16px; height: 20px; background: #FFC107; } 94%,3%,11%,19%,27%,35%,43%,51%,58% { left: 41.2%; width: 16px; height: 20px; background: #FF9800; } } @keyframes changeto-lower { 0%,70%,90% { padding: 0px; display: inline-block; border-radius: 100%; background: #673C63; border-width: 0 0 0 0; border: 0px solid #673C63; transform: translate(-90%, 0%); } 71%,89% { background: none; border: solid #673C63; border-radius: 0px; border-width: 0 2px 2px 0; display: inline-block; padding: 1px; float: left; transform-origin: bottom left; transform: rotate(-45deg) translate(-50%, -65%); -webkit-transform: rotate(-45deg) translate(-50%, -65%); } } @keyframes changeto-greater { 0%,70%,90% { top: 50%; padding: 0px; display: inline-block; border-radius: 100%; background: #673C63; border-width: 0 0 0 0; border: 0px solid #673C63; transform: translate(-80%, 0%); } 71%,89% { top: 30%; background: none; border: solid #673C63; border-radius: 0px; border-width: 0 2px 2px 0; display: inline-block; padding: 1px; float: left; transform-origin: bottom left; transform: rotate(135deg) translate(-80%, 20%); -webkit-transform: rotate(135deg) translate(-80%, 20%); } }
50
Candle
By:
jusar
body{background:#ECF0F1} .load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); /*change these sizes to fit into your project*/ width:100px; height:100px; } .load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite} .load :first-child{background:#19A68C;animation-delay:-1.5s} .load :nth-child(2){background:#F63D3A;animation-delay:-1s} .load :nth-child(3){background:#FDA543;animation-delay:-0.5s} .load :last-child{background:#193B48} @keyframes spin{ 0%,100%{transform:translate(0)} 25%{transform:translate(160%)} 50%{transform:translate(160%, 160%)} 75%{transform:translate(0, 160%)} }
49
Flat Preloader
By:
rald_dev
Previous
1
…
8
9
10