Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
Text Reveal Animation
* { margin: 0; padding: 0; } h1 { text-transform: uppercase; font-size: 2em; color: #262626; margin: 220px auto 20px 80px; padding: 20px; text-align: center; position: relative; z-index: 1; display: inline-block; } h1:before { content: ''; width: 0; height: 100%; background: #fbff65; position: absolute; top: 0; left: 0; animation: animate 5s 2s ease alternate 1 forwards; border-right: 5px solid #262626; } @keyframes animate { 0% { width: 100%; z-index: 1; } 50% { width: 0%; z-index: 1; } 51% { width: 0%; z-index: -1; } 100% { width: 100%; z-index: -1; } }
40
Text reveal animation v2
By:
rald_dev
Input Animation
Your Text
body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f38181; font-family: "montserrat", sans-serif; font-weight: 500; color: #fff; } h1 { padding-bottom: 30px; font-weight: 900; font-size: 35px; } .form { width: 30%; position: relative; height: 60px; overflow: hidden; } .form input { width: 100%; height: 100%; color: #fff; padding-top: 20px; border: none; background-color: #f38181; } .form label { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; border-bottom: 1px solid white; } .form label::after { content: ""; position: absolute; bottom: -1px; left: 0px; width: 100%; height: 100%; border-bottom: 3px solid #fce38a; transform: translateX(-100%); transition: all 0.3s ease; } .content-name { position: absolute; bottom: 0px; left: 0px; padding-bottom: 5px; transition: all 0.3s ease; } .form input:focus { outline: none; } .form input:focus + .label-name .content-name, .form input:valid + .label-name .content-name { transform: translateY(-150%); font-size: 14px; left: 0px; color: #fce38a; } .form input:focus + .label-name::after, .form input:valid + .label-name::after { transform: translateX(0%); }
39
Input
By:
rald_dev
I am a
HTML
CSS
JAVASCRIPT
developer
body { display: flex; align-items: center; justify-content: center; min-height: 100vh;; } .slider-wrapper { font-size: 40px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .slider { height: 50px; overflow: hidden; padding: 0 10px; } .slider > div { box-sizing: border-box; color: #FFF; height: 50px; margin-bottom: 50px; padding: 0 10px; text-align: center; } .text1 { background-color: #2ed573; animation: slide 5s linear infinite; } .text2 { background-color: #ffa502; } .text3 { background-color: #ff4757; } @keyframes slide { 0% { margin-top: -300px; } 5% { margin-top: -200px; } 33% { margin-top: -200px; } 38% { margin-top: -100px; } 66% { margin-top: -100px; } 72% { margin-top: -0; } 100% { margin-top: 0; } }
39
Text sliding animation
By:
rald_dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; align-items: center; min-height: 100vh; display: flex; } .box-outer { overflow: hidden; margin: 50px auto; width: 200px; height: 200px; } .main_box { width: 200px; height: 200px; position: relative; background: #f34c4c; border: 5px solid #ffffff; } .bar { position: absolute; width: 50px; height: 5px; background: rgb(0, 0, 0); transition: all 1s linear; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; } .bar.delay { animation-delay: 0.5s; } .top { top: -5px; left: -5px; } .right { top: 18px; right: -28px; transform: rotate(90deg); } .bottom { bottom: -5px; left: -5px; } .left { top: 18px; left: -28px; transform: rotate(90deg); } @-webkit-keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } @keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } .top, .bottom { animation-name: h-move; } @-webkit-keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } @keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } .right, .left { animation-name: v-move; }
39
Box border animation
By:
rald_dev
Loading
*, html,body{ padding:0px; margin:0px; box-sizing:border-box; font-family:'Poppins', sans-serif; } ::selection{ background-color:#2d98da; color:#fff; } body{ background-color:#227093; display:flex; justify-content:center; align-items:center; width:100%; min-height:100vh; } .Box{ position:relative; width:150px; height:150px; border:3px solid rgba(255,255,255,.2); border-radius:50%; text-align:center; line-height:150px; color:#57beec; font-size:20px; box-shadow:0px 0px 10px rgba(0,0,0,.2); font-weight:bold; } .Box:before{ content:''; position:absolute; top:-3px; left:-3px; width:100%; height:100%; background-color:transparent; border:3px solid transparent; border-top:3px solid #57beec; border-right:3px solid #57beec; border-radius:50%; transform:rotate(0deg); animation:SpanLoading 2s linear infinite; } .Box span{ position:absolute; top: 50%; left:50%; width:50%; height:3px; background-color:transparent; transform-style:preserve-3d; transform-origin:left; transform:rotate(42deg); animation:Loading 2s linear infinite; } .Box span:before{ content:''; position:absolute; width:15px; height:15px; border-radius:50%; background-color:#57beec; right:-7px; bottom:-7px; box-shadow:0px 0px 10px #57beec; } @keyframes Loading{ 0%{ transform:rotate(42deg); } 100%{ transform:rotate(402deg); } } @keyframes SpanLoading{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
39
Glowing Loader Ring Animation
By:
rald_dev
body { background: #222; } .box { background-color: #61ab20; margin: 0 auto; width: 500px; height: 300px; position: relative; box-shadow: inset 0 0 3px #000; border-radius: 5px; border: 1px solid #111; overflow: hidden; } .box b { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #3673cf; box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04); position: absolute; -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; } @-webkit-keyframes moveX { from { left: 0; } to { left: 480px; } } @-moz-keyframes moveX { from { left: 0; } to { left: 480px; } } @-o-keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveX { from { left: 0; } to { left: 480px; } } @-webkit-keyframes moveY { from { top: 0; } to { top: 280px; } } @-moz-keyframes moveY { from { top: 0; } to { top: 280px; } } @-o-keyframes moveY { from { top: 0; } to { top: 280px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } }
39
CSS Bouncing Ball
By:
rald_dev
Bouncy
body { font-family: arial; background: -webkit-radial-gradient(circle, #757462, #272623); background: -moz-radial-gradient(circle, #757462, #272623); } h1 { -webkit-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; position: relative; float: left; color: white; } .object-1 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 50%; background: #ffcc00; -webkit-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-2 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 25%; background: #00ccff; -webkit-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-3 { position: absolute; width: 100px; height: 100px; border-radius: 10%; left: 75%; background: #00cc00; -webkit-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; } @-webkit-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-moz-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-webkit-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } } @-moz-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } }
38
Bouncing
By:
rald_dev
.wheel{ border: 2px solid black; border-radius: 50%; margin-left: 50px; position: absolute; width: 55vw; height: 55vw; max-height: 500px; max-width: 500px; animation-name: wheel; animation-duration: 10s;/*Time of the animation*/ animation-iteration-count: infinite;/*How many times the animation repeats*/ animation-timing-function: linear;/*How the animation should progress over time*/ } /********LINES********/ .line{ background-color: black; width: 50%; height: 2px; position: absolute; left: 50%; top: 50%; transform-origin: 0% 0%; } /******Line types*********/ .line:nth-of-type(2){ transform: rotate(60deg); } .line:nth-of-type(3){ transform: rotate(120deg); } .line:nth-of-type(4){ transform: rotate(180deg); } .line:nth-of-type(5){ transform: rotate(240deg); } .line:nth-of-type(6){ transform: rotate(300deg); } /********CABINS**********/ .cabin{ background-color: red; width: 20%; height: 20%; position: absolute; border: 2px solid; transform-origin: 50% 0%; animation: cabins 10s ease-in-out infinite;/*animation-name, animation-duration, animation-timing-function, animation-iteration-count*/ } /*******Cabin types*********/ .cabin:nth-of-type(1){ right: -8.5%; top: 50%; } .cabin:nth-of-type(2){ right: 17%; top: 93.5%; } .cabin:nth-of-type(3){ right: 67%; top: 93.5%; } .cabin:nth-of-type(4){ left: -8.5%; top: 50%; } .cabin:nth-of-type(5){ left: 17%; top: 7%; } .cabin:nth-of-type(6){ right: 17%; top: 7%; } /**********K E Y F R A M E S*************/ @keyframes wheel{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes cabins{ 0%{ transform: rotate(0deg); } 25%{ background-color: yellow; } 50%{ background-color: purple; } 75%{ background-color: yellow; } 100%{ transform: rotate(-360deg); } }
38
Ferris Wheel Animation
By:
rald_dev
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
body {background:#0f0f0f; font-family:Arial, Helvetica, sans-serif;} a, a:link, a:visited, a:hover, a:active {color:inherit; text-decoration:none;} .menu {position:absolute; top:50%; left:50%; width:15em; height:auto; transform:translate(-50%, -50%); overflow:hidden; border-radius:0.25em; background:#333;} .menu-block {background:#369; color:#fff;} .menu-block:target .submenu {max-height:10em; padding:1em 0 0.5em 0;} .block-title {display:block; position:relative; padding:1em; border-bottom:1px solid #258;} .menu-block:target .block-title {border-bottom:1px solid #369;} .block-title i {margin-right:0.5em;} .block-title:before {content:""; position:absolute; display:none; width:1em; height:1em; background:#369; left:1em; bottom:-0.5em; transform:rotate(45deg);} .menu-block:target .block-title:before {display:block;} .submenu {background:#333; padding:0; overflow:hidden; max-height:0; transition:all 0.25s linear;} .submenu a {display:block; position:relative; padding:0.25em 1em; margin:0.25em 0;} .submenu a:before {content:""; position:absolute; width:0.2em; height:100%; background:none; top:0; left:0.25em; transition:background 0.25s linear;} .submenu a:hover:before {background:#369;} .submenu a i {margin-right:0.5em;}
38
Navigation Menu [
By:
rald_dev
CSS
Border animation ?
Hover me to find out !
=>
CSS Border animation ?
Hover me to find out !
body { text-align:center; } header { display:inline-table; vertical-align:middle; margin:1em ; padding:0.5em 1em; background: linear-gradient( to right, transparent 20%, turquoise 20%, turquoise 80%, transparent 80% ) bottom no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) right 300% no-repeat, linear-gradient( to right, turquoise 0%, turquoise 100% ) 9000% 0 no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) left 9000% no-repeat ; transition:background-size 2s ease-in; } header, header ~ header:hover { background-size: 100% 8px, 3px 0, 3px 3px, 3px 0; } header:hover, header ~ header { background-size: 200% 3px , 3px 100%, 100% 3px, 3px 100%; transition:background-size 2s ease-in-out; } span { font-size:4em; display:inline-block; vertical-align:middle; background:turquoise; border-radius:100%; box-shadow:0 0 5px; }
38
Border Animation
By:
rald_dev
body{ background: #333642; } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .cog-one { --cog-color: #898888; --cog-accent-color: #A5A2A2; --cog-inner-size: 30px; --cog-outer-size: 50px; --start-rotation: 360deg; --end-rotation: 0deg; } .cog-two { --cog-color: #A16036; --cog-accent-color: #BC7F60; --cog-inner-size: 15px; --cog-outer-size: 40px; --start-rotation: 16deg; --end-rotation: 376deg; left: 120px; top: 110px; transform: rotate(var(--start-rotation)); } .cog-three { --cog-color: #F1B72E; --cog-accent-color: #FFD100; --cog-inner-size: 20px; --cog-outer-size: 50px; --start-rotation: 300deg; --end-rotation: -60deg; left: 33px; top: 210px; transform: rotate(var(--start-rotation)); } .cog { position: absolute; width: var(--cog-inner-size); height: var(--cog-inner-size); background: transparent; border-radius: 50%; border: var(--cog-outer-size) solid var(--cog-color); animation: 5s cogRotate infinite linear; } @keyframes cogRotate { 0% { transform: rotate(var(--start-rotation)); } 100% { transform: rotate(var(--end-rotation)) } } /* Inner circle accent */ .cog::before { content: ''; position: absolute; width: calc(var(--cog-inner-size) + 10px); height: calc(var(--cog-inner-size) + 10px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Outer circle accent */ .cog::after { content: ''; position: absolute; width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .teeth.vertical { position: absolute; left: 50%; transform: translateX(-50%); } /* Top and bottom teeth */ .cog-one .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; top: -70px; } .cog-two .teeth.vertical { width: 15px; height: 125px; top: -55px; background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); } .cog-three .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; top: -70px; } .teeth.vertical::after { content: ''; position: absolute; transform:rotate(45deg); } /* Top right and bottom left teeth */ .cog-one .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; } .cog-two .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); width: 15px; height: 125px; } .cog-three .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; } .teeth.horizontal { position: absolute; transform: translateY(-50%); top: 50%; } /* Left and right teeth */ .cog-one .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; left: -55px; } .cog-three .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; } .teeth.horizontal::after { content: ''; position: absolute; transform: rotate(45deg); } /* Top left and bottom right teeth */ .cog-one .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; } .cog-three .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; }
38
Cogs Animation
By:
rald_dev
#square { width: 100px; height: 100px; background: red; -webkit-animation: super-rainbow 15s infinite alternate linear; -moz-animation: super-rainbow 15s infinite alternate linear; } @-webkit-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } } @-moz-keyframes super-rainbow { 0% { background: red; } 20% { background: orange; } 40% { background: yellow; } 60% { background: green; } 80% { background: blue; } 100% { background: violet; } }
37
Rainbow Box
By:
rald_dev
Previous
1
…
4
5
6
7
8
…
10
Next