Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Wave
body{ background: #1d1e22; } .container{ width: 20px; position: relative; margin: auto; top: 20vh; } .ball{ --radius: calc(200px + var(--n)*10px); top: var(--radius); transform-origin: 0 calc(-1 * var(--radius)); position: absolute; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #000; background: #ffad4a; animation: oscillation calc(60s / (50 + var(--n))) ease-in-out infinite alternate; } .ball::before{ content: ""; position: absolute; top: calc(-1*var(--radius)); left: 50%; transform: translate(-50%); width: 1px; height: var(--radius); background: black; } .ball1{--n:1}.ball2{--n:2}.ball3{--n:3}.ball4{--n:4}.ball5{--n:5}.ball6{--n:6}.ball7{--n:7}.ball8{--n:8}.ball9{--n:9}.ball10{--n:10}.ball11{--n:11}.ball12{--n:12}.ball13{--n:13}.ball14{--n:14}.ball15{--n:15} @keyframes oscillation { from { transform: rotate(20deg); } to{ transform: rotate(-20deg); } }
32
Pendulum Wave
By:
rald_dev
Water Loader Animation
body{ width: 100%; height: 100vh; background-color: #555; display: flex; justify-content: center; align-items: center; } .water{ width:400px; height: 400px; background-color: skyblue; border-radius: 50%; position: relative; box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5); overflow: hidden; } .water:before, .water:after{ content:''; position: absolute; width:400px; height: 400px; top:-150px; background-color: #fff; } .water:before{ border-radius: 45%; background:rgba(255,255,255,.7); animation:wave 5s linear infinite; } .water:after{ border-radius: 35%; background:rgba(255,255,255,.3); animation:wave 5s linear infinite; } @keyframes wave{ 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } }
2
Wave-loader Animation Pure css
By:
rald_dev
body { background: -webkit-linear-gradient(45deg, rgba(242,249,255,1) 0%,rgba(64,150,238,1) 100%); overflow: hidden; } .sand { background: #FFDEAA; width: 100%; height: 10px; bottom: 0; position: absolute; z-index: 5; } .cloudcontain1 { top: 250px; width: 200px; height: 150px; -webkit-animation: cloudmove1 55s infinite; animation: cloudmove1 55s infinite; position: absolute; opacity: .7; } @-webkit-keyframes cloudmove1 { 0% {left: 0;} 100% {left: 1200px;} } @keyframes cloudmove1 { 0% {left: 0;} 100% {left: 100%;} } .cloudcontain2 { top: 75px; width: 200px; height: 150px; -webkit-animation: cloudmove2 40s infinite; animation: cloudmove2 40s infinite; position: absolute; -webkit-animation-delay: -16s; animation-delay: -16s; opacity: .3; } @-webkit-keyframes cloudmove2 { 0% {left: 0;} 100% {left: 100%;} } @keyframes cloudmove2 { 0% {left: 0;} 100% {left: 100%;} } .cloudcontain3 { top: 320px; width: 200px; height: 150px; -webkit-animation: cloudmove3 47s infinite; animation: cloudmove3 47s infinite; position: absolute; -webkit-animation-delay: -8s; animation-delay: -8s; opacity: .6; } @-webkit-keyframes cloudmove3 { 0% {left: 0;} 100% {left: 100%;} } @keyframes cloudmove3 { 0% {left: 0;} 100% {left: 100%;} } .cloudcontain4 { top: 400px; width: 200px; height: 150px; -webkit-animation: cloudmove4 41s infinite; animation: cloudmove4 41s infinite; position: absolute; -webkit-animation-delay: -13s; animation-delay: -13s; opacity: .6; } @-webkit-keyframes cloudmove4 { 0% {left: 0;} 100% {left: 100%;} } @keyframes cloudmove4 { 0% {left: 0;} 100% {left: 100%;} } .cloud1 { width: 100px; height: 100px; border-radius: 50px; background: white; position :absolute; z-index: 1; margin: 15px; } .cloud2 { width: 100px; height: 100px; border-radius: 50px; background: white; position :absolute; z-index: 2; margin: 45px; } .cloud3 { width: 75px; height: 75px; border-radius: 45px; background: white; position :absolute; z-index: 3; margin: 0px; top: 50px; } /*Front Row*/ .blade1, .blade2, .blade3, .blade4, .blade5, .blade6, .blade7, .blade8, .blade9, .blade10, .blade11, .blade12, .blade13, .blade14, .blade15, .blade16, .blade17, .blade18, .blade19, .blade20, .blade21, .blade22, .blade23, .blade24, .blade25, .blade26, .blade27, .blade28, .blade29, .blade30, .blade31, .blade32, .blade33, .blade34, .blade35, .blade36, .blade37, .blade38, .blade39, .blade40, .blade41, .blade42, .blade43, .blade44, .blade45{ border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #156A32; position: absolute; -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; z-index: 7; bottom: 0px; } .blade1 {left: 0px;} .blade2 {left: 25px;} .blade3 {left: 50px;} .blade4 {left: 75px;} .blade5 {left: 100px;} .blade6 {left: 125px;} .blade7 {left: 150px;} .blade8 {left: 175px;} .blade9 {left: 200px;} .blade10 {left: 225px;} .blade11 {left: 250px;} .blade12 {left: 275px;} .blade13 {left: 300px;} .blade14 {left: 325px;} .blade15 {left: 350px;} .blade16 {left: 375px;} .blade17 {left: 400px;} .blade18 {left: 425px;} .blade19 {left: 450px;} .blade20 {left: 475px;} .blade21 {left: 500px;} .blade22 {left: 525px;} .blade23 {left: 550px;} .blade24 {left: 575px;} .blade25 {left: 600px;} .blade26 {left: 625px;} .blade27 {left: 650px;} .blade28 {left: 675px;} .blade29 {left: 700px;} .blade30 {left: 725px;} .blade31 {left: 750px;} .blade32 {left: 775px;} .blade33 {left: 800px;} .blade34 {left: 825px;} .blade35 {left: 850px;} .blade36 {left: 875px;} .blade37 {left: 900px;} .blade38 {left: 925px;} .blade39 {left: 950px;} .blade40 {left: 975px;} .blade41 {left: 1000px;} .blade42 {left: 1025px;} .blade43 {left: 1050px;} .blade44 {left: 1075px;} .blade45 {left: 1100px;} @-webkit-keyframes mymove { 0% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #156A32; } 25% { border-left: 25px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #156A32; } 50% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #156A32; } 75% { border-left: 25px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #156A32; } 100% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #156A32; } } /*Back Row*/ .blade1b, .blade2b, .blade3b, .blade4b, .blade5b, .blade6b, .blade7b, .blade8b, .blade9b, .blade10b, .blade11b, .blade12b, .blade13b, .blade14b, .blade15b, .blade16b, .blade17b, .blade18b, .blade19b, .blade20b, .blade21b, .blade22b, .blade23b, .blade24b, .blade25b, .blade26b, .blade27b, .blade28b, .blade29b, .blade30b, .blade31b, .blade32b, .blade33b, .blade34b, .blade35b, .blade36b, .blade37b, .blade38b, .blade39b, .blade40b, .blade41b, .blade42b, .blade43b, .blade44b, .blade45b { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #1E4018; position: absolute; -webkit-animation: mymoveb 5s infinite; animation: mymoveb 5s infinite; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; z-index: 5; bottom: 0px; } .blade1b {left: 15px;} .blade2b {left: 35px;} .blade3b {left: 65px;} .blade4b {left: 85px;} .blade5b {left: 115px;} .blade6b {left: 135px;} .blade7b {left: 165px;} .blade8b {left: 185px;} .blade9b {left: 215px;} .blade10b {left: 235px;} .blade11b {left: 265px;} .blade12b {left: 285px;} .blade13b {left: 315px;} .blade14b {left: 335px;} .blade15b {left: 365px;} .blade16b {left: 385px;} .blade17b {left: 415px;} .blade18b {left: 435px;} .blade19b {left: 465px;} .blade20b {left: 485px;} .blade21b {left: 515px;} .blade22b {left: 535px;} .blade23b {left: 565px;} .blade24b {left: 585px;} .blade25b {left: 615px;} .blade26b {left: 635px;} .blade27b {left: 665px;} .blade28b {left: 685px;} .blade29b {left: 715px;} .blade30b {left: 735px;} .blade31b {left: 765px;} .blade32b {left: 785px;} .blade33b {left: 815px;} .blade34b {left: 835px;} .blade35b {left: 865px;} .blade36b {left: 885px;} .blade37b {left: 915px;} .blade38b {left: 935px;} .blade39b {left: 965px;} .blade40b {left: 985px;} .blade41b {left: 1015px;} .blade42b {left: 1035px;} .blade43b {left: 1065px;} .blade44b {left: 1085px;} .blade45b {left: 1115px;} @-webkit-keyframes mymoveb { 0% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #1E4018; } 25% { border-left: 25px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #1E4018; } 50% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #1E4018; } 75% { border-left: 25px solid transparent; border-right: 10px solid transparent; border-bottom: 55px solid #1E4018; } 100% { border-left: 10px solid transparent; border-right: 25px solid transparent; border-bottom: 55px solid #1E4018; } }
2
Wavy Grass
By:
rald_dev
:root { --bg-color: #fff; --wave-color: #2c3e50; --animation-time: 8s; --max-height: 200px; --circle-offset: -1.5%; --wave-width: 55%; --height-wave-up: 109%; --height-wave-down: 100%; --top-wave-up: 60%; --top-wave-down: 40%; --border-radius-right-up: 100% 50%; --border-radius-left-up: 50% 100%; } body { margin: 0; overflow: hidden; background: var(--wave-color); } .container { position: relative; height: 50vh; background: var(--bg-color); } .wave { position: absolute; bottom: 0; width: 100%; height: var(--max-height); background: var(--bg-color); animation: beWavy var(--animation-time) infinite linear; } .wave::before, .wave::after { content: ""; display: block; position: absolute; border-radius: var(--border-radius-right-up); width: var(--wave-width); } .wave::before { height: var(--height-wave-up); background-color: var(--wave-color); right: var(--circle-offset); top: var(--top-wave-up); animation: beWavyBefore var(--animation-time) infinite step-end; } .wave::after { height: var(--height-wave-down); background-color: var(--bg-color); left: var(--circle-offset); top: var(--top-wave-down); animation: beWavyAfter var(--animation-time) infinite step-end; } @keyframes beWavy { 0% { animation-timing-function: ease-in; height: var(--max-height); } 25% { animation-timing-function: ease-out; height: 0; } 50% { animation-timing-function: ease-in; height: var(--max-height); } 75% { animation-timing-function: ease-out; height: 0; } 100% { animation-timing-function: ease-in; height: var(--max-height); } } @keyframes beWavyBefore { 25% { background-color: var(--bg-color); height: var(--height-wave-down); top: var(--top-wave-down); border-radius: var(--border-radius-left-up); } 75% { background-color: var(--wave-color); height: var(--height-wave-up); top: var(--top-wave-up); border-radius: var(--border-radius-right-up); } } @keyframes beWavyAfter { 25% { background-color: var(--wave-color); height: var(--height-wave-up); top: var(--top-wave-up); border-radius: var(--border-radius-left-up); } 75% { background-color: var(--bg-color); height: var(--height-wave-down); top: var(--top-wave-down); border-radius: var(--border-radius-right-up); } }
2
Pure CSS Animated Wave
By:
rald_dev
45%
.container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118, 218, 255); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; } .wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; } .wave::before, .wave::after { content: ""; position: absolute; width: 400px; height: 400px; top: 0; left: 50%; background-color: rgba(255, 255, 255, 0.4); border-radius: 45%; transform: translate(-50%, -70%) rotate(0); animation: rotate 6s linear infinite; z-index: 1; } .wave::after { border-radius: 47%; background-color: rgba(255, 255, 255, 0.9); transform: translate(-50%, -70%) rotate(0); animation: rotate 10s linear -5s infinite; z-index: 2; } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; color: #000; z-index: 10; } @keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); } }
2
Pure Css Wave Progress bar
By:
rald_dev
T
R
A
I
N
I
N
G
body { font-family: 'Montserrat', sans-serif; } .textContainer { width: 100%; height: 100vh; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } h1 { position: relative; text-transform: uppercase; font-size: 50px; letter-spacing: 2px; margin-bottom: 20px; color: red; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } span { display: inline-block; position: relative; } .bouncingAnim { justify-content: center; align-items: flex-end; } .bouncingAnim span.ml_25 {margin-left: 25px;} .bouncingAnim span:nth-child(1) {animation: bounce 2.3s ease-in-out infinite; } .bouncingAnim span:nth-child(2) {animation: bounce 2.3s ease-in-out .33s infinite; } .bouncingAnim span:nth-child(3) {animation: bounce 2.3s ease-in-out 0.66s infinite; } .bouncingAnim span:nth-child(4) {animation: bounce 2.3s ease-in-out 0.99s infinite; } .bouncingAnim span:nth-child(5) {animation: bounce 2.3s ease-in-out 1.33s infinite; } .bouncingAnim span:nth-child(6) {animation: bounce 2.3s ease-in-out 1.66s infinite; } .bouncingAnim span:nth-child(7) {animation: bounce 2.3s ease-in-out 1.99s infinite; } .bouncingAnim span:nth-child(8) {animation: bounce 2.3s ease-in-out 2.33s infinite; } .bouncingAnim span:nth-child(9) {animation: bounce 2.3s ease-in-out 2.66s infinite; } .bouncingAnim span:nth-child(10) {animation: bounce 2.3s ease-in-out 2.99s infinite; } @-webkit-keyframes bounce{ 0%, 75%, 100%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } 25%{ -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px); opacity: .5; } } @keyframes bounce{ 0%, 75%, 100%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } 25%{ -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px); opacity: .5; } }
1
Wave Text Animation Pure CSS
By:
rald_dev
The Wave
html,body { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#FFCDD2, #F48FB1); } .๐ { width: 400px; height: 400px; background-color: whitesmoke; background-image: linear-gradient( darkblue, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5) ); border-radius: 5px; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); position: relative; overflow:hidden; } .๐ .title { color: white; font-size: 24px; font-family: serif; text-align: center; text-transform: uppercase; line-height: 250px; letter-spacing: 0.4em; z-index: 1; position: absolute; width: 100%; } .๐ .wave { width: 600px; height: 600px; position: absolute; background-color: #039BE5; top: -250px; left: -100px; filter: opacity(0.4); border-radius: 43%; animation: drift linear infinite; transform-origin: 50% 48%; } .sp{ width:100px; height:100px; background-color:red; } .๐ .wave:nth-of-type(1) { animation-duration: 5s; } .๐ .wave:nth-of-type(2) { animation-duration: 7s; } .๐ .wave:nth-of-type(3) { animation-duration: 9s; background-color: red; filter: opacity(0.1); } @keyframes drift { from { transform: rotate(360deg); } }
1
Waves animation Pure CSS
By:
rald_dev