Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
.credit-card { animation: slide 3s infinite; } .coin1 { animation: drop 3s infinite; } .coin2 { animation: drop 6s infinite; } .coin3 { animation: drop 8s infinite; } @keyframes drop { 0% { transform: translate3d(50px, 50px, 0px); } 50% { transform: translate3d(25px, 500px, 0px); } 100% { transform: translate3d(0px, 800px, 0px); } } @keyframes slide { 0% { transform: translate3d(0%, 40px, 0px); animation-timing-function: ease-in; } 10% { transform: translate3d(10%, 90px, 0px); animation-timing-function: ease-out; } 20% { transform: translate3d(20%, 40px, 0px); animation-timing-function: ease-in; } 30% { transform: translate3d(30%, 90px, 0px); animation-timing-function: ease-out; } 40% { transform: translate3d(40%, 40px, 0px); animation-timing-function: ease-in; } 50% { transform: translate3d(50%, 90px, 0px); animation-timing-function: ease-out; } 60% { transform: translate3d(60%, 40px, 0px); animation-timing-function: ease-in; } 70% { transform: translate3d(70%, 90px, 0px); } 80% { transform: translate3d(80%, 40px, 0px); animation-timing-function: ease-in; } 90% { transform: translate3d(90%, 90px, 0px); animation-timing-function: ease-out; } 100% { transform: translate3d(100%, 40px, 0px); animation-timing-function: ease-in; } }
53
Credit Card Animation
By:
rald_dev
Rald_Dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; } .wrapper { position: relative; } .word { height: 70px; border-right: 2px solid green; line-height: 70px; overflow: hidden; animation: moveRight 1500ms steps(12) infinite, borderBlink 200ms infinite; font-size: 50px; white-space: nowrap; } .cursor { height: 100%; width: 2px; color: green; } @keyframes moveRight { 0% { width: 0%; } 100% { width: 270px; } } @keyframes borderBlink { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: green; } }
53
Typewriter Effect -Single Word Animation
By:
rald_dev
BUTTON
BUTTON
BUTTON
*{ margin: 0px; padding: 0xp; box-sizing: border-box; outline-style: none; } body{ display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } button{ display: flex; align-items: center; justify-content: center; border: none; background-color: rgba(100, 32, 163, 0.877); margin: auto; height: 40px; width: 100px; clip-path: circle(20%); transition: 0.5s; } span{ font-size: 0px; color: burlywood; width: 100%; height: 100%; padding: 10px; transition: 0.5s; } button:hover{ transition: 0.5s; clip-path: circle(100%); border: 1px purple solid; background: rgba(226, 180, 138, 0.925); } span:hover{ transition: 0.5s; font-size: 15px; color: purple; transform: rotate(360deg); }
53
Button 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; }
53
Thermometer Loader
By:
rald_dev
* { 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; } }
52
Wavy Preloader Animation
By:
rald_dev
*{ padding: 0; margin: 0; box-sizing: border-box; } :root{ --color-bg:#222222; --color-box-1:#ffffff; --color-box-2:#ff1a3c; --animation-speed:1.5s; --row-col-size:5; --grid-item-size:8vmin; } body{ background-color: var(--color-bg); min-height: 100vh; display: grid; place-items: center; } .art{ border: .2rem solid var(--color-box-2); padding: 5vmin; display: grid; grid-template-columns: repeat(var(--row-col-size),var(--grid-item-size)); grid-template-rows: repeat(var(--row-col-size),var(--grid-item-size)); gap: 1vmin; } .item:nth-child(odd){ background-color: var(--color-box-1); animation: ans-white var(--animation-speed) linear infinite; } .item:nth-child(even){ background-color: var(--color-box-2); animation: ans var(--animation-speed) linear infinite; } @keyframes ans { 0%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 25%{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); } 50%{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 0); } 75%{ clip-path: polygon(100% 0, 100% 0, 0 100%, 0 0); } 100%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } } @keyframes ans-white { 0%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 25%{ clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%); } 50%{ clip-path: polygon(0 0, 100% 100%, 0 100%, 0 100%); } 75%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%); } 100%{ clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } }
52
Geometric Animation
By:
rald_dev
hi folks, this is typing animation using CSS
created with ♥ by
@rald_dev
:)
|
body{ background: #000; padding-top: 10px; } p{ color: lime; font-family: "Courier"; font-size: 12px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 30em; animation: type 4s steps(60, end); } p:nth-child(2){ animation: type2 8s steps(60, end); } p a{ color: lime; text-decoration: none; } span{ animation: blink 1s infinite; } @keyframes type{ from { width: 0; } } @keyframes type2{ 0%{width: 0;} 50%{width: 0;} 100%{ width: 100; } } @keyframes blink{ to{opacity: .0;} } ::selection{ background: black; }
52
Typing animation
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); }
52
Text Animation
By:
rald_dev
body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #6a3be4; } .container { position: relative; } .progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-style: solid; border-color: #c1edff; border-width: 2px; border-radius: 50px; width: 250px; height: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, .2); animation: progress 3s infinite linear; } .ball { position: absolute; height: 42px; width: 42px; background-color: #02a9f4; border-radius: 50%; top: 4px; left: 4px; animation: ball 1.5s ease-in-out alternate infinite; } @keyframes progress { to {transform: translate(-50%, -50%) rotate(360deg);} } @keyframes ball { to {left: 204px;} }
51
Bouncing ball v3
By:
rald_dev
We build
websites
brands
experiences
body{ margin: 0; padding: 0; font-family: 'Abril Fatface', serif; } .slider{ height: 600px; background-color: #293132; text-align: center; position: relative; animation: slideColor 10s forwards infinite; } .caption{ line-height: 100px; font-size: 60px; color: #fff; position: relative; top: 50%; transform: translateY(-50%); text-shadow: 0px 5px 5px rgba(0,0,0,.25); margin-left: -300px; } .text-box{ display: inline-block; position: relative; } .text-box div{ display: inline-block; position: absolute; top: -200px; transform: rotateX(-90deg); opacity: 0; text-shadow: 0px 5px 5px rgba(0,0,0,.25); animation-timing-function: ease; } .text-box div:nth-child(1){ animation: rollDown 10s forwards infinite; } .text-box div:nth-child(2){ animation: rollDown2 10s forwards infinite; } .text-box div:nth-child(3){ animation: rollDown3 10s forwards infinite; } @keyframes rollDown { 0%{ top: -200px; transform: rotateX(-90deg); } 11%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 22%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 33%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes rollDown2 { 33%{ top: -200px; transform: rotateX(-90deg); } 44%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 55%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 66%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes rollDown3 { 66%{ top: -200px; transform: rotateX(-90deg); } 77%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 88%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 99%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes slideColor{ 0%{ background-color: #387780; } 33%{ background-color: #3f88c5; } 66%{ background-color: #588b8b; } 100%{ background-color: #387780; } }
51
Rolling text animation
By:
rald_dev
Menu
Programming
C++
C#
Java
Web Development
Javascript
PHP
Ruby
Python
OS
Windows
Macintosh
Linux
Projects
Android
iOS
Web
Windows
About
*{ padding:0; margin:0; box-sizing:border-box; } .wrapper{ min-height: calc(100vh - 70px); width:100%; position: relative; } html{ height: 100%; } body{ height:100%; background:#ddd; } h2{ padding:40px; background:#112233; color:#f0f1f5; font-family: big john; text-align: center; font-size:30pt; letter-spacing: 15px; } .navigationDesktop{ background:#fc575e; } nav { height:40px; width:560px; margin:0 auto; text-align: center; text-transform: uppercase; } nav a{ display:block; text-decoration: none; font-family: monospace; font-weight: bold; font-size:13pt; color:#112233; } nav a:hover{ background:#223433; color:#f0f1f5; } nav ul{ list-style: none; } nav ul li{ float:left; width:140px; height:40px; line-height: 40px; background:#fc575e; } nav ul ul li{ position: relative; display:none; } nav ul ul ul{ display:none; } nav ul li:hover ul li{ display: block; animation: navmenu 600ms forwards; } @keyframes navmenu{ 0%{ opacity:0; top:-10px; } 100%{ opacity:0.9; top:0px; } } nav ul ul li:hover ul{ display:block; position:absolute; width:140px; left:140px; top:0px; } article{ padding:10px; font-family: arial; } footer{ height: 70px; border-top:2px solid #fc575e; padding:20px; width: 100%; text-align: center; background:#112233; color:#fff; font-family: sans-serif; font-weight: bold; font-size:11pt; text-transform: uppercase; }
51
Navigation Menu with Footer Menu
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}
51
Circle Loader v2
By:
rald_dev
Previous
1
…
6
7
8
9
10
Next