5
Some of the Most Popular CSS Text Animations
source link: https://blog.geekyants.com/some-of-the-most-popular-css-text-animations-ba369db7b583
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Some of the Most Popular CSS Text Animations
Let’s show you how these popular CSS text animations work
What Is an Animation?
Animation is a method to create movements in a sequence.
What are CSS Animations?
CSS animations are used to animate transitions from one CSS style configuration to a new style. The idea behind this is to create an animation of a Text element using CSS. Let us have a look at some of these animations and the code to implement them.
Some of the most popular Design Examples include:
Dropping Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
</style>
</head>
<body>
<div class="wrapper one">
<div class="drop-main">
<div class="d">D</div>
<div class="r">R</div>
<div class="o">O</div>
<div class="p">P</div>
<div class="s">!</div>
</div>
</div>
</body>
</html>
.wrapper.one {
background-color: #1a1a1a;
}
.drop-main {
display: flex;
font-size: 7rem;
margin: 1.5rem;
justify-content: center;
font-family: "Russo One", sans-serif;
}
.d {
opacity: 0;
animation: drop 0.4s linear forwards;
color: #00ffff;
}
.r {
opacity: 0;
animation: drop 0.4s linear forwards 0.2s;
color: #99ffff;
}
.o {
opacity: 0;
animation: drop 0.4s linear forwards 0.4s;
color: #ccffff;
}
.p {
opacity: 0;
animation: drop 0.4s linear forwards 0.6s;
color: #ffffff;
}
.s {
opacity: 0;
animation: drop 0.4s linear forwards 0.8s;
color: #de4040;
}
@keyframes drop {
0% {
transform: translateY(-200px);
opacity: 0;
}
50% {
transform: translateY(0px);
opacity: 1;
}
65% {
transform: translateY(-17px);
opacity: 1;
}
75% {
transform: translateY(-22px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
Neon Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper two">
<div class="neon">
<h3>NEON</h3>
</div>
</div>
</body>
</html>
.wrapper.two {
background-color: #2c0101;
font-size: 6rem;
font-family: "Play", sans-serif;
}
.neon h3 {
margin: 1rem auto;
animation: neon 1s ease infinite;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 10px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 2px #fed128, 2px 2px 2px #806914;
color: #f5efcb;
}
50% {
text-shadow: 0 0 2px #800e0b, 0 0 5px #800e0b, 0 0 5px #800e0b, 0 0 5px #800e0b, 0 0 2px #800e0b, 4px 4px 2px #40340a;
color: #eda0d3;
}
}
A Moving Background Behind A Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
</style>
</head>
<body>
<div class="wrapper three">
<div>
<h3>BALLOONS</h3>
</div>
</div>
</body>
</html>
.wrapper.three {
background-color: #010c3d;
}
.three h3 {
font-family: "Ranchers", cursive;
background: url(https://drive.google.com/uc?export=view&id=1qvnbL55D_X7Bzo6fwwtXNyjhBhgi1iyX);
margin: 1.5rem;
display: inline-flex;
font-size: 10rem;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: #5b728a54;
animation: animatedOne 30s linear infinite;
}
@keyframes animatedOne {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
Typing Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper four">
<div class="type">
<h3 class="typing">TYPING EFFECT</h3>
</div>
</div>
</body>
</html>
.wrapper.four {
background-color: #9ba5b4;
font-size: 3rem;
font-family: "Play", sans-serif;
}
.four .type{
padding: 2rem 1rem;
width: auto;
margin: auto;
}
.four h3 {
width: 13ch;
border-right: 4px solid black;
margin: 2rem auto;
white-space: nowrap;
overflow: hidden;
animation: typing 2s steps(13, end), blink-caret 0.5s step-end infinite alternate;
}
@-webkit-keyframes typing {
from {
width: 0;
}
}
@-webkit-keyframes blink-caret {
50% {
border-color: transparent;
}
}
Floating Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper five">
<span class="float-box">
<h3 class="float">FLOAT</h3>
</span>
</div>
</body>
</html>
.wrapper.five {
background-color: #99bec8;
font-size: 3rem;
font-family: "Play", sans-serif;
}
.float-box {
margin: auto;
transform-style: preserve-3d;
transform-origin: left;
transform: perspective(100px) rotateY(10deg);
}
.float {
animation: floating 2s linear infinite;
margin: 3.5rem auto;
padding: 1rem;
background: #5a9bad;
color: #ffffff;
box-shadow: -20px -17px 8px 0px #5a9bad63;
}
@keyframes floating {
0% {
transform: translate(0%, 30%);
}
50% {
transform: translate(0%, -30%);
}
100% {
transform: translate(0%, 30%);
}
}
Flicker Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&display=swap');
</style>
</head>
<body>
<div class="wrapper six">
<div>
<h3 class="flicker">FLICKER</h3>
</div>
</div>
</body>
</html>
.wrapper.six{
background-color: #222222;
}
.flicker {
font-size: 6rem;
font-family: 'Merienda', sans-serif;
margin: 1rem auto;
color: #fffefe61;
background: -webkit-gradient(linear, left top, right top, from(#e6e6e6), to(#1d1c1c), color-stop(0.8, #ffffff)) no-repeat;
background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.8, #fff)) no-repeat;
background-size: 110px 100%;
-webkit-background-clip: text;
background-clip: text;
animation: flick 1.5s infinite;
}
@keyframes flick {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
Disappear Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
</style>
</head>
<body>
<div class="wrapper seven">
<div>
<h3 class="text">
<span>DISAPPEAR</span>
</h3>
</div>
</div>
</body>
</html>
.wrapper.seven {
background-color: #e66f40;
}
.seven > div{
width: auto;
margin: 1rem auto;
}
.seven .text {
font-size: 6rem;
margin: 1rem auto;
color: #e5e5e5;
}
.text span {
font-family: 'Indie Flower', cursive;
line-height: 0;
animation: disappear 4s 2s both infinite;
}
@keyframes disappear {
50% {
text-shadow: 0 0 40px #cbc7c7;
}
to {
text-shadow: 0 0 20px #cbc7c7;
opacity: 0;
}
}
Smoke Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper eight">
<h3 class="smoke">
<span>S</span>
<span>M</span>
<span>O</span>
<span>K</span>
<span>E</span>
</h3>
</div>
</body>
</html>
.wrapper.eight {
font-size: 6rem;
background-color: #000000;
overflow: hidden;
color: transparent;
}
.eight .smoke {
margin: 3rem auto;
display: inline-flex;
}
.eight span {
display: inline-flex;
text-shadow: 0 0 0 #f5f5f5;
font-family: 'Play', sans-serif;
animation: smoke 5s ease infinite;
}@keyframes smoke {
60% {
text-shadow: 0 0 40px #f5f5f5;
}
to {
transform: translate3d(12rem, -10rem, 0) skewX(50deg);
text-shadow: 0 0 20px #f5f5f5;
opacity: 0;
}
}.eight span:nth-of-type(1) {
animation-delay: 3.1s;
}
.eight span:nth-of-type(2) {
animation-delay: 3.2s;
}
.eight span:nth-of-type(3) {
animation-delay: 3.3s;
}
.eight span:nth-of-type(4) {
animation-delay: 3.4s;
}
.eight span:nth-of-type(5) {
animation-delay: 3.5s;
}
Rotate Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
</style>
</head>
<body>
<div class="wrapper nine">
<div>
<h3 class="rotate">
<span>R</span>
<span>0</span>
<span>T</span>
<span>A</span>
<span>T</span>
<span>E</span>
</h3>
</div>
</div>
</body>
</html>
.wrapper.nine {
background-color: #09715d;
font-family: 'Arvo', serif;
}
.rotate span {
font-size: 5rem;
color: #f8f8f8;
display: inline-flex;
animation: rotate 2s infinite;
}
@keyframes rotate {
0%,
75% {
transform: rotateY(360deg);
}
}
.nine span:nth-of-type(1) {
animation-delay: 0.2s;
}
.nine span:nth-of-type(2) {
animation-delay: 0.4s;
}
.nine span:nth-of-type(3) {
animation-delay: 0.6s;
}
.nine span:nth-of-type(4) {
animation-delay: 0.8s;
}
.nine span:nth-of-type(5) {
animation-delay: 1s;
}
.nine span:nth-of-type(6) {
animation-delay: 1.2s;
}
Bounce Text
Code Snippets :
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper ten">
<div>
<h3 class="bounce">
<span>B</span>
<span>0</span>
<span>U</span>
<span>N</span>
<span>C</span>
<span>E</span>
</h3>
</div>
</div>
</body>
</html>
.wrapper.ten {
background-color: #0e2839;
}
.bounce {
font-size: 5rem;
width: 100%;
margin: 3rem auto;
display: inline-flex;
justify-content: center;
-webkit-box-reflect: below -20px linear-gradient(transparent, #211e1e2e);
}
.bounce span {
display: inline-flex;
color: #c7f4ff;
font-family: "Play", sans-serif;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%,
50%,
100% {
transform: translateY(0);
}
25% {
transform: translateY(-20px);
}
}
.ten span:nth-of-type(1) {
animation-delay: 0.1s;
}
.ten span:nth-of-type(2) {
animation-delay: 0.2s;
}
.ten span:nth-of-type(3) {
animation-delay: 0.3s;
}
.ten span:nth-of-type(4) {
animation-delay: 0.4s;
}
.ten span:nth-of-type(5) {
animation-delay: 0.5s;
}
.ten span:nth-of-type(6) {
animation-delay: 0.6s;
}
You can also access more resources here from this Codepen Link
Conclusion
Hopefully, this article succeeded in making CSS animations clearer and sparked new ideas on how to implement them.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK