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; } }
68
Wavy Preloader Animation
By:
rald_dev
#backbar{ width:100%; height:2em; background-color: grey; opacity: 0.3; /*gives a nice hue*/ margin-top: 2em; } #progress{ width:100%; height:2em; background-color: green; -webkit-animation-name: dwindle; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: dwindle; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes dwindle { 0% {width: 100%; background-color: green} 50% {background-color: blue;} 90% {background-color: red;} 95% {width:0%;} 100% {width: 0%; background-color: red;} } @keyframes dwindle { 0% {width: 100%; background-color: green} 50% {background-color: blue;} 90% {background-color: red;} 95% {width:0%;} 100% {width: 0%; background-color: red;} }
68
Countdown Timer
By:
rald_dev
R
AI
N
B
O
W
R
O
C
K
S
.center { text-align:center; } #boxWrapper { width: 100%; height: 300px; } .box { width: 80px; height: 80px; margin: 10px; display: inline-block; font-size: 60px; line-height: 80px; color: white; text-align: center; border:1px solid white; -webkit-font-smoothing: antialiased; -webkit-transform: translateZ(0.1px); -moz-transform: translateZ(0.1px); -o-transform: translateZ(0.1px); -ms-transform: translateZ(0.1px); transform: translateZ(0.1px); -webkit-animation: hue-animation 7s 0s linear infinite; animation: hue-animation 7s 0s linear infinite; } .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes introAnimation { 0% { -webkit-transform: scale(0) rotate(-180deg); opacity: 0; } 50% { -webkit-transform: scale(1) rotate(0deg); opacity: 1; } 70% { -webkit-transform: scale(1) rotate(0deg); } 100% { -webkit-transform: scale(0.8) rotate(0deg); } } @-moz-keyframes introAnimation { 0% { -moz-transform: scale(0) rotate(-180deg); opacity: 0; } 50% { -moz-transform: scale(1) rotate(0deg); opacity: 1; } 70% { -moz-transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(0.8) rotate(0deg); } } @-o-keyframes introAnimation { 0% { -o-transform: scale(0) rotate(-180deg); opacity: 0; } 50% { -o-transform: scale(1) rotate(0deg); opacity: 1; } 70% { -o-transform: scale(1) rotate(0deg); } 100% { -o-transform: scale(0.8) rotate(0deg); } } @keyframes introAnimation { 00% { transform: scale(0) rotate(-180deg); opacity: 0; } 50% { transform: scale(1) rotate(0deg); opacity: 1; } 70% { transform: scale(1) rotate(0deg); } 100% { transform: scale(0.8) rotate(0deg); } } .introAnimation { -webkit-backface-visibility: visible !important; -webkit-animation-name: introAnimation; -moz-backface-visibility: visible !important; -moz-animation-name: introAnimation; -o-backface-visibility: visible !important; -o-animation-name: introAnimation; backface-visibility: visible !important; animation-name: introAnimation; } .two { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .three { -webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -ms-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s; } .four { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -ms-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } .five { -webkit-animation-delay: 2.0s; -moz-animation-delay: 2.0s; -ms-animation-delay: 2.0s; -o-animation-delay: 2.0s; animation-delay: 2.0s; } .six { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; -ms-animation-delay: 2.5s; -o-animation-delay: 2.5s; animation-delay: 2.5s; } .seven { -webkit-animation-delay: 3.0s; -moz-animation-delay: 3.0s; -ms-animation-delay: 3.0s; -o-animation-delay: 3.0s; animation-delay: 3.0s; } .eight { -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; -ms-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } .nine { -webkit-animation-delay: 4.0s; -moz-animation-delay: 4.0s; -ms-animation-delay: 4.0s; -o-animation-delay: 4.0s; animation-delay: 4.0s; } .ten { -webkit-animation-delay: 4.5s; -moz-animation-delay: 4.5s; -ms-animation-delay: 4.5s; -o-animation-delay: 4.5s; animation-delay: 4.5s; } .eleven { -webkit-animation-delay: 5.0s; -moz-animation-delay: 5.0s; -ms-animation-delay: 5.0s; -o-animation-delay: 5.0s; animation-delay: 5.0s; } body{ padding: 0; margin: 0; overflow: hidden; } #boxWrapper{ width: 100%; height: 100vmax; background: #efb73e; opacity: .8; -webkit-animation: hue-animation 7s 0s linear infinite; animation: hue-animation 7s 0s linear infinite; } @keyframes hue-animation { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } @-webkit-keyframes hue-animation { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } }
68
Rainbow Background
By:
rald_dev
body { width: 100%; height: 100%; margin: 0; padding: 0; } #ms-container { width: 100%; height: 100vh; background: #1c9cf2; } .ms-content { position: absolute; width: 200px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 10px solid #2ea4f2; border-radius: 100%; } .ms-content-inside { width: 100%; height: 100%; position: relative; } .ms-line-down-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotate(0deg); transition: transform 0s ease; } #ms-download { display: none; } #ms-download:checked ~ .ms-line-down-container { transform: rotate(-360deg); transition: transform 1.5s ease 1.25s; } .ms-line-down { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 10px; height: 125px; background: #FFFFFF; border-radius: 50px; transition: height .5s ease; } #ms-download:checked ~ .ms-line-down-container .ms-line-down { height: 10px; top: -20px; animation: ms-bounce .5s forwards .55s; } #ms-download:checked ~ .ms-line-down-container .ms-line-down:before { content: ''; position: absolute; top: 0; left: -94px; right: 0; bottom: 0; width: 200px; height: 200px; border: 10px solid transparent; border-radius: 100%; animation: ms-border-fill .5s forwards 3s; } .ms-line-point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 58px; height: 130px; transition: height .15s ease .45s; } #ms-download:checked ~ .ms-line-point { height: 60px; } #ms-download:checked ~ .ms-line-point:before { transform: rotate(90deg); right: -10px; animation: ms-check-right .25s forwards 3s; } #ms-download:checked ~ .ms-line-point:after { transform: rotate(-90deg); left: -10px; animation: ms-check-left .25s forwards 3s; } .ms-line-point:before, .ms-line-point:after { content: ''; position: absolute; width: 10px; height: 75px; bottom: -10px; background: #FFFFFF; border-radius: 50px; transition: transform .15s ease .47s, left .15s ease .47s, right .15s ease .47s; } .ms-line-point:before { right: 0px; transform: rotate(45deg); } .ms-line-point:after { left: 0px; transform: rotate(-45deg); } @keyframes ms-bounce { 0% { top: -20px; } 25% { top: -250px; } 50% { top: -275px; } 100% { top: -190px; } } @keyframes ms-check-left { 0% { transform: rotate(-90deg); left: -10px; height: 75px; } 100% { transform: rotate(-45deg); left: 0px; height: 45px; } } @keyframes ms-check-right { 0% { transform: rotate(90deg); right: -10px; height: 75px; bottom: -10px; } 100% { transform: rotate(45deg); right: 10px; height: 80px; bottom: -15px; } } @keyframes ms-border-fill { 0% { border: 10px solid transparent; } 100% { border: 10px solid #FFFFFF; } }
67
Download Animation
By:
rald_dev
@property --redFillColorStop { syntax: ""; inherits: false; initial-value: 0px; } .loaderWrapper { /* scale: 1; */ --loaderHeight: 600px; --animationDuration: 3.5s; height: var(--loaderHeight); aspect-ratio: 1/3.5; position: relative; animation: shake var(--animationDuration) infinite linear; } .blue { background: hsl(193, 93%, 78%); } .gray { background: hsl(0, 0%, 92%); } .redFill { /* --redFillColorStop: 300px; */ background: linear-gradient(to top, hsl(3, 82%, 51%) var(--redFillColorStop), transparent 0%); animation: tempRise var(--animationDuration) infinite linear; } .partOne { width: 70%; height: 100%; margin-inline: auto; border-radius: 9999px; position: relative; } .partOneChild, .partOneChildChild { position: absolute; inset: 0.5rem; border-radius: inherit; } .partTwo { width: 100%; aspect-ratio: 1; border-radius: 50%; position: absolute; bottom: 0; } .partTwoChild, .partTwoChildChild { position: absolute; inset: 0.5rem; border-radius: inherit; } .partOneChild { z-index: 1; } .partTwoChildChild { z-index: 1; } .partOneChildChild, .partTwoChildChild { overflow: hidden; } .partOneChildChild::before, .partTwoChildChild::before { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: translateX(-1.5rem) translateY(-0.6875rem); background: hsl(0 0% 92% / 0.25); } .partTwoChildChild::before { translate: 0.25rem 0; } .shine { position: absolute; width: 10%; aspect-ratio: 1/2.75; left: 10%; top: 7%; border-radius: inherit; background: white; box-shadow: 0 35px white, 0 45px white, 0 55px white; } .measurements { position: absolute; width: 25%; aspect-ratio: 3.5/1; border-radius: inherit; top: 28%; left: 5%; background: white; opacity: 0.75; box-shadow: 0 1rem white, 0 2rem white, 0 3rem white, 1rem 3rem white, 0 4rem white, 0 5rem white, 0 6rem white, 0 7rem white, 1rem 7rem white, 0 8rem white, 0 9rem white, 0 10rem white, 0 11rem white, 1rem 11rem white, 0 12rem white, 0 13rem white, 0 14rem white, 0 15rem white, 1rem 15rem white; } @keyframes tempRise { 0%, 100% { --redFillColorStop: 0px; } 50% { --redFillColorStop: calc(var(--loaderHeight) - 2rem); } } @keyframes shake { 0%, 100%, 10%, 90% { transform: translateX(0rem); } 20%, 30%, 38%, 44%, 48%, 50%, 54%, 60%, 68%, 78% { transform: translateX(-0.5rem); } 25%, 34%, 41%, 46%, 49%, 52%, 57%, 64%, 73%, 84% { transform: translateX(0.5rem); } } /* Ignore */ * { margin: 0; box-sizing: border-box; /* outline: solid hsl(0 0% 10% / 0.5); */ } body { min-height:100svh; display: grid; place-items: center; background: #141719; }
67
Thermometer Loader
By:
rald_dev
Be
Curious
Be
Creative
Be
Confident
.stage { margin: 100px 50px 50px 50px; } @-webkit-keyframes spincube { from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { -webkit-transform: rotateY(-90deg); } 33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); } 66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); } 83% { -webkit-transform: rotateX(90deg); } } @keyframes spincube { from,to { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } 33% { -moz-transform: rotateY(-90deg) rotateZ(90deg); -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); } 50% { -moz-transform: rotateY(-180deg) rotateZ(90deg); -ms-transform: rotateY(-180deg) rotateZ(90deg); transform: rotateY(-180deg) rotateZ(90deg); } 66% { -moz-transform: rotateY(-270deg) rotateX(90deg); -ms-transform: rotateY(-270deg) rotateX(90deg); transform: rotateY(-270deg) rotateX(90deg); } 83% { -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); } } .cubespinner { -webkit-animation-name: spincube; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 12s; animation-name: spincube; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 12s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 60px 60px 0; -moz-transform-origin: 60px 60px 0; -ms-transform-origin: 60px 60px 0; transform-origin: 60px 60px 0; } .cubespinner div { position: absolute; width: 300px; height: 300px; background: rgba(255,255,255,0.9); line-height:200px; text-align: center; font-size: 50px; } .cubespinner .face1 { color: CadetBlue; -webkit-transform: translateZ(60px); -moz-transform: translateZ(60px); -ms-transform: translateZ(60px); transform: translateZ(60px); } .cubespinner .face2 { color: ForestGreen; -webkit-transform: rotateY(90deg) translateZ(60px); -moz-transform: rotateY(90deg) translateZ(60px); -ms-transform: rotateY(90deg) translateZ(60px); transform: rotateY(90deg) translateZ(60px); } .cubespinner .face3 { color: blue; -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); transform: rotateY(90deg) rotateX(90deg) translateZ(60px); } .cubespinner .face4 { color: orange; -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); } .cubespinner .face5 { color: red; -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); } .cubespinner .face6 { color: DarkSlateGray; -webkit-transform: rotateX(-90deg) translateZ(60px); -moz-transform: rotateX(-90deg) translateZ(60px); -ms-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px); }
66
Text Animation
By:
rald_dev
html { box-sizing: border-box !important; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html, body { width: 100%; height: 100%; } body { background: #333; color: #fff; font-size: 22px; font-weight: normal; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 1.5; display: flex; justify-content: center; align-items: center; } .charging-container { max-width: 150px; width: 100%; height: 60px; border: 4px solid rgb(236, 39, 72); border-radius: 5px; position: relative; cursor: pointer; } .charging-container::before { content: ''; position: absolute; width: 8px; height: 16px; background: rgb(236, 39, 72); right: -9px; top: 50%; margin-top: -8px; border-radius: 2px; } .charging-container::after { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; /* right: 10px; */ background: rgb(236, 39, 72); transition: all .3s; -webkit-animation: charging 2s steps(5) infinite; -moz-animation: charging 2s steps(5) infinite; animation: charging 2s steps(5) infinite; animation: charging 2s steps(5) infinite; } .charging-container:hover::after { animation-play-state: paused; } @-webkit-keyframes charging { from { width: 20%; } to { width: 100%; } } @-moz-keyframes charging { from { width: 20%; } to { width: 100%; } } @keyframes charging { from { width: 20%; } to { width: 100%; } }
65
Battery Charging
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; } }
65
Mouse Scroll Down Animation
By:
rald_dev
/* Inspirated from http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html */ .ouro { position: relative; display:inline-block; height: 46px; width: 46px; margin: 1em; border-radius: 50%; background: none repeat scroll 0 0 #DDDDDD; overflow:hidden; box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); } .ouro:after { content: ""; position: absolute; top: 9px; left: 9px; display: block; height: 28px; width: 28px; background: none repeat scroll 0 0 #F2F2F2; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.1); } .ouro > span { position: absolute; height: 100%; width: 50%; overflow: hidden; } .left { left:0 } .right { left:50% } .anim { position: absolute; left: 100%; top: 0; height: 100%; width: 100%; border-radius: 999px; background: none repeat scroll 0 0 #508EC3; opacity: 0.8; -webkit-animation: ui-spinner-rotate-left 3s infinite; animation: ui-spinner-rotate-left 3s infinite; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; } .left .anim { border-bottom-left-radius: 0; border-top-left-radius: 0; } .right .anim { border-bottom-right-radius: 0; border-top-right-radius: 0; left: -100%; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; } /* v2 */ .ouro2 .anim { -webkit-animation-delay:0; animation-delay:0; } .ouro2 .right .anim{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } /* v3 */ .ouro3 .anim { -webkit-animation-delay: 0s; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear; animation-delay: 0s; animation-duration:3s; animation-timing-function: linear; } .ouro3 .right .anim{ -webkit-animation-name: ui-spinner-rotate-right; -webkit-animation-delay:0; -webkit-animation-delay: 1.5s; animation-name: ui-spinner-rotate-right; animation-delay:0; animation-delay: 1.5s; } /* round variation */ .round .ouro:after {display:none } /* double variation */ .double .ouro:after { height: 13px; width: 13px; left: 7px; top: 7px; border: 10px solid #ddd; background: transparent; box-shadow: none; } @keyframes ui-spinner-rotate-right{ 0%{transform:rotate(0deg)} 25%{transform:rotate(180deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(360deg)} 100%{transform:rotate(360deg)} } @keyframes ui-spinner-rotate-left{ 0%{transform:rotate(0deg)} 25%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-right{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(180deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(360deg)} 100%{-webkit-transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-left{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(0deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)} } /* * Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code. */ /* presentation styles */ html {height: 100%} body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%} .block {display: table-cell; vertical-align:middle} h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;} .info {margin-top: 25px} .info a {font-size: 12px; color: #999} .info br + a {text-decoration:none}
65
Circle Loader v2
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; } }
64
Falling leaves
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; } }
64
scroll down line 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); } }
64
Pixel animation
By:
rald_dev
Previous
1
…
7
8
9
10
Next