Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; } body { margin: 0; padding: 0; } .loader { width: 100%; height: 100%; background-color: #f0f0f0; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .loader-container { width: 120px; height: 120px; } .loader-block { width: 16px; height: 16px; background-color: #ff2d37; border-radius: 3px; margin-right: 10px; margin-bottom: 10px; position: relative; float: left; animation: wave 1.5s infinite; } .loader-block:nth-child(4n + 2) { animation-delay: 0.2s; } .loader-block:nth-child(4n + 3) { animation-delay: 0.4s; } .loader-block:nth-child(4n + 4) { animation-delay: 0.6s; } /* Create a wave animation */ @keyframes wave { 0% { top: 0; opacity: 1; } 50% { top: 30px; opacity: 0.2; } 100% { top: 0; opacity: 1; } }
30
Wavy Preloader Animation
By:
rald_dev
body {background: #222;} /* leaf animations */ #leaves {position:relative;top:-50px;width:100%;text-align: right;} #leaves i { display: inline-block; width: 200px; height: 150px; background: linear-gradient(to bottom right, #309900, #005600); transform: skew(20deg); border-radius: 5% 40% 70%; box-shadow: inset 0px 0px 1px #222; border: 1px solid #333; z-index: 1; -webkit-animation: falling 5s 0s infinite; } #leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; } #leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; } #leaves i:before { position: absolute; content: ''; top: 117px; right: 9px; height: 27px; width: 32px; transform: rotate(49deg); border-radius: 0% 15% 15% 0%; border-top: 1px solid #222; border-bottom: 1px solid #222; border-left: 0px solid #222; border-right: 1px solid #222; background: linear-gradient(to right, rgba(0,100,0,1), #005600); z-index: 1; } #leaves i:after { content: ''; height: 125px; width: 10px; background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0)); display: block; transform: rotate(125deg); position: absolute; left: 85px; border-radius:50%; } #leaves i:nth-of-type(n) { height:23px; width:30px; } #leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; } #leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; } #leaves i:nth-of-type(2n+1) { height:11px; width:16px; } #leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; } #leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; } #leaves i:nth-of-type(3n+2) { height:17px; width:23px; } #leaves i:nth-of-type(3n+2):before { height:4px; width:4px; top:12px; right:1px; } #leaves i:nth-of-type(3n+2):after { height:10px; width:2px; top:1px; left:8px; } #leaves i:nth-of-type(n) { -webkit-animation-delay: 1.9s;} #leaves i:nth-of-type(2n) { -webkit-animation-delay: 3.9s;} #leaves i:nth-of-type(3n) { -webkit-animation-delay: 2.3s;} #leaves i:nth-of-type(4n) { -webkit-animation-delay: 4.4s;} #leaves i:nth-of-type(5n) { -webkit-animation-delay: 5s; } #leaves i:nth-of-type(6n) { -webkit-animation-delay: 3.5s;} #leaves i:nth-of-type(7n) { -webkit-animation-delay: 2.8s;} #leaves i:nth-of-type(8n) { -webkit-animation-delay: 1.5s;} #leaves i:nth-of-type(9n) { -webkit-animation-delay: 3.3s;} #leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;} #leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;} #leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;} #leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s; } #leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;} #leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s; } #leaves i:nth-of-type(n) { background: linear-gradient(to bottom right, #309900, #005600); } #leaves i:nth-of-type(2n+2) { background: linear-gradient(to bottom right, #5e9900, #2b5600); } #leaves i:nth-of-type(4n+1) { background: linear-gradient(to bottom right, #990, #564500); } #leaves i:nth-of-type(n) { opacity: .7;} #leaves i:nth-of-type(3n+1) { opacity: .5;} #leaves i:nth-of-type(3n+2) { opacity: .3;} #leaves i:nth-of-type(n) {transform: rotate(180deg);} #leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;} @-webkit-keyframes falling { 0% { -webkit-transform: translate3d(300,0,0) rotate(0deg); } 100% { -webkit-transform: translate3d(-350px,700px,0) rotate(90deg); opacity: 0; } } @-webkit-keyframes falling3 { 0% { -webkit-transform: translate3d(0,0,0) rotate(-20deg); } 100% { -webkit-transform: translate3d(-230px,640px,0) rotate(-70deg); opacity: 0; } } @-webkit-keyframes falling2 { 0% { -webkit-transform: translate3d(0,0,0) rotate(90deg); } 100% { -webkit-transform: translate3d(-400px,680px,0) rotate(0deg); opacity: 0; } }
29
Falling leaves
By:
rald_dev
* { margin: 0; padding: 0; } body { background: #262626; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .down { position: relative; width: 50px; height: 80px; border-radius: 25px; background: transparent; border: 2px solid #fff; overflow: hidden; } .down:before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; left: 50%; top: 10px; transform: translate(-50%, 0); animation: animate 1s linear infinite; } .down:after { content: ''; position: absolute; width: 6px; height: 15px; border-radius: 50%; background: #fff; left: 50%; top: 5px; transform: translate(-50%, 0); border-radius: 3px; } @keyframes animate { 0% { transform: translate(-50%, 0px); opacity: 0; } 50% { transform: translate(-50%, 40px); opacity: 1; } 100% { transform: translate(-50%, 80px); opacity: 0; } }
29
Mouse Scroll Down Animation
By:
rald_dev
P
xel
/* Base Styles */ * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #050505; overflow: hidden; } .logo { font-family: "Lato", Arial, sans-serif; font-size: calc(1em + 12vw); letter-spacing: 0.08em; color: #eee; text-transform: uppercase; white-space: nowrap; user-select: none; } /* Cuboid Positioning */ .cuboid, .cuboid-face { display: inline-block; } .cuboid { font-size: 0.75em; position: relative; height: 0.5em; width: 1em; vertical-align: middle; transform-style: preserve-3d; transform: rotateX(-40deg) rotateY(-45deg); animation: rotateCuboid 3s ease-in-out infinite; } .cuboid-face { position: absolute; top: 0; width: 100%; height: 100%; border: 0.08em solid #eee; } .cuboid-face-top, .cuboid-face-bottom { height: 1em; } .cuboid-face-front { transform: translateZ(0.5em); animation: faceFront 3s ease-in-out infinite; } .cuboid-face-back { transform: rotateY(180deg) translateZ(0.5em); animation: faceBack 3s ease-in-out infinite; } .cuboid-face-left { transform: rotateY(-90deg) translateZ(0.5em); animation: faceLeft 3s ease-in-out infinite; } .cuboid-face-right { transform: rotateY(90deg) translateZ(0.5em); animation: faceRight 3s ease-in-out infinite; } .cuboid-face-top { transform: rotateX(90deg) translateZ(0.5em); } .cuboid-face-bottom { transform: rotateX(-90deg); } /* Animations */ @keyframes faceFront { 50% { transform: translateZ(0.7em); } } @keyframes faceBack { 50% { transform: rotateY(180deg) translateZ(0.7em); } } @keyframes faceLeft { 50% { transform: rotateY(-90deg) translateZ(0.7em); } } @keyframes faceRight { 50% { transform: rotateY(90deg) translateZ(0.7em); } } @keyframes rotateCuboid { 100% { transform: rotateX(-40deg) rotateY(-405deg); } }
29
Pixel animation
By:
rald_dev
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); } }
29
Circle(dots) css animation loader
By:
rald_dev
Previous
1
…
8
9
10