Wave (CSS animation)

Developer
Anton Mudrenok
Size
3,409 Kb
Views
56,672
  1. Wave (CSS animation) Previews
  2. Wave (CSS animation) HTML Codes
  3. Wave (CSS animation) CSS Codes

How do I make an wave (css animation)?

One more wave animation to my pens)Dribbble shot: https://dribbble.com/shots/3107804-wave. What is a wave (css animation)? How do you make a wave (css animation)? This script and codes were developed by Anton Mudrenok on 28 September 2022, Wednesday.

Wave (CSS animation) Previews
IQ Test

Wave (CSS animation) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wave (CSS animation)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="coast"> <div class="wave-rel-wrap"> <div class="wave"></div> </div> </div> <div class="coast delay"> <div class="wave-rel-wrap"> <div class="wave delay"></div> </div> </div> <div class="text text-w">w</div> <div class="text text-a">a</div> <div class="text text-v">v</div> <div class="text text-e">e</div>
</div>
</body>
</html>

Wave (CSS animation) - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Muli");
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
html, body { font-size: 62.5%; background-color: #00091B; font-family: 'Muli', Helvetica, sans-serif;
}
.container { position: absolute; width: 17rem; height: 10rem; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.text { color: #fff; font-size: 6rem; font-weight: 900; display: inline-block; position: absolute; bottom: 0; -webkit-animation: text 1050ms ease-in infinite; animation: text 1050ms ease-in infinite; -webkit-transform: translatez(0); transform: translatez(0);
}
.text-w { left: 0rem; -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); -webkit-animation: text-w 1050ms ease-in infinite; animation: text-w 1050ms ease-in infinite;
}
.text-a { left: 5.4rem; -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
.text-v { left: 9.6rem; -webkit-animation-delay: 230ms; animation-delay: 230ms;
}
.text-e { left: 13rem; -webkit-animation-delay: 310ms; animation-delay: 310ms;
}
.coast { position: absolute; left: 1.3rem; bottom: 1.7rem; width: 6.2rem; height: 2.2rem; display: inline-block; -webkit-animation: coast 2100ms linear infinite; animation: coast 2100ms linear infinite; -webkit-transform: translateZ(0); transform: translateZ(0);
}
.wave-rel-wrap { position: relative; width: 100%; height: 100%; -webkit-perspective: 3rem; perspective: 3rem; -webkit-perspective-origin: 0%, 50%; perspective-origin: 0%, 50%;
}
.wave { position: absolute; width: 6.2rem; height: 2.2rem; border-radius: 1.1rem; background: -webkit-radial-gradient(center ellipse, #74f1fc 0%, #32e6ff 73%, #15c7fa 100%); background: radial-gradient(ellipse at center, #74f1fc 0%, #32e6ff 73%, #15c7fa 100%); display: inline-block; -webkit-animation: wave 2100ms linear infinite; animation: wave 2100ms linear infinite; will-change: width; -webkit-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0);
}
.delay { -webkit-animation-delay: 1050ms; animation-delay: 1050ms;
}
@-webkit-keyframes text { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 45% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes text { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 45% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes text-w { 0% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 38% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 69% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); }
}
@keyframes text-w { 0% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 38% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 69% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); }
}
@-webkit-keyframes coast { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 23% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } 100% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); }
}
@keyframes coast { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 23% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } 100% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); }
}
@-webkit-keyframes wave { 0% { -webkit-transform: scale(0); transform: scale(0); width: 2.2rem; } 10% { -webkit-transform: scale(1); transform: scale(1); } 23% { width: 2.2rem; } 32% { width: 6.1rem; } 42% { width: 5rem; -webkit-transform: rotateY(0deg) scale(1, 1); transform: rotateY(0deg) scale(1, 1); } 51% { -webkit-transform: rotateY(90deg) scale(0.6, 0.2); transform: rotateY(90deg) scale(0.6, 0.2); } 52% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } 100% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); }
}
@keyframes wave { 0% { -webkit-transform: scale(0); transform: scale(0); width: 2.2rem; } 10% { -webkit-transform: scale(1); transform: scale(1); } 23% { width: 2.2rem; } 32% { width: 6.1rem; } 42% { width: 5rem; -webkit-transform: rotateY(0deg) scale(1, 1); transform: rotateY(0deg) scale(1, 1); } 51% { -webkit-transform: rotateY(90deg) scale(0.6, 0.2); transform: rotateY(90deg) scale(0.6, 0.2); } 52% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } 100% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); }
}
Wave (CSS animation) - Script Codes
Wave (CSS animation) - Script Codes
Home Page Home
Developer Anton Mudrenok
Username mudrenok
Uploaded September 28, 2022
Rating 4.5
Size 3,409 Kb
Views 56,672
Do you need developer help for Wave (CSS animation)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Mudrenok (mudrenok) Script Codes
Name
Swipeable Video Cards
Gomoku JS
Radial Menu Animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!