codes
Rainbow Text
.rainbow-text {
animation: hueRotate 4s linear infinite;
}
@keyframes hueRotate {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
Blinking Text
.blink-text {
animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
Bounce
/* wrap each letter in its own span */
.bounce-text span {
display: inline-block;
animation: bounce 1s ease-in-out infinite;
}
.bounce-text span:nth-child(2) { animation-delay: .08s; }
.bounce-text span:nth-child(3) { animation-delay: .16s; }
.bounce-text span:nth-child(4) { animation-delay: .24s; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
type here
.typewriter {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid currentColor;
width: 0;
animation:
typing 3s steps(9) infinite,
caret .7s step-end infinite;
}
@keyframes typing {
0% { width: 0; }
55% { width: 9ch; }
100% { width: 9ch; }
}
@keyframes caret {
50% { border-color: transparent; }
}
Shaking Text
.shake-text {
display: inline-block;
animation: shake .35s ease-in-out infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
Glowing Text
.glow-text {
color: #fff;
animation: glow 1.8s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 4px #ff9ecb, 0 0 8px #ff9ecb, 0 0 12px #b892e8; }
50% { text-shadow: 0 0 10px #ff9ecb, 0 0 20px #b892e8, 0 0 30px #7f7cf0; }
}
Flip
/* wrap each letter in its own span */
.flip-text span {
display: inline-block;
animation: flip 2.2s ease-in-out infinite;
}
.flip-text span:nth-child(2) { animation-delay: .1s; }
.flip-text span:nth-child(3) { animation-delay: .2s; }
.flip-text span:nth-child(4) { animation-delay: .3s; }
@keyframes flip {
0%, 40%, 100% { transform: rotateY(0deg); }
20% { transform: rotateY(180deg); }
}
Pulse Text
.pulse-text {
display: inline-block;
animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
Jello Text
.jello-text {
display: inline-block;
animation: jello 2.2s ease-in-out infinite;
}
@keyframes jello {
0%, 11.1%, 100% { transform: none; }
22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
}
Everywordfadesin
/* wrap each word in its own span */
.lyric-line {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em;
}
.lyric-line span {
opacity: 0;
animation: wordFade 5s ease-in-out infinite;
}
.lyric-line span:nth-child(1) { animation-delay: 0s; }
.lyric-line span:nth-child(2) { animation-delay: .3s; }
.lyric-line span:nth-child(3) { animation-delay: .6s; }
.lyric-line span:nth-child(4) { animation-delay: .9s; }
.lyric-line span:nth-child(5) { animation-delay: 1.2s; }
@keyframes wordFade {
0% { opacity: 0; transform: translateY(4px); }
10% { opacity: 1; transform: translateY(0); }
70% { opacity: 1; transform: translateY(0); }
85% { opacity: 0; transform: translateY(-4px); }
100% { opacity: 0; transform: translateY(4px); }
}
Wave
/* wrap each letter in its own span */
.wave-text span {
display: inline-block;
animation: wave 1.6s ease-in-out infinite;
}
.wave-text span:nth-child(2) { animation-delay: .1s; }
.wave-text span:nth-child(3) { animation-delay: .2s; }
.wave-text span:nth-child(4) { animation-delay: .3s; }
@keyframes wave {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-8px); }
}
Flicker Text
.flicker-text {
animation: flicker 2.5s linear infinite;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 22%, 24%, 55% { opacity: 0.3; }
}
Wiggle Text
.wiggle-text {
display: inline-block;
animation: wiggle 1.2s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
Swing Text
.swing-text {
display: inline-block;
transform-origin: top center;
animation: swing 2s ease-in-out infinite;
}
@keyframes swing {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-3deg); }
}
Elastic Text
.elastic-text {
display: inline-block;
animation: elastic 1.6s ease-in-out infinite;
}
@keyframes elastic {
0%, 100% { transform: scaleX(1) scaleY(1); }
20% { transform: scaleX(1.3) scaleY(0.7); }
40% { transform: scaleX(0.8) scaleY(1.2); }
60% { transform: scaleX(1.1) scaleY(0.9); }
80% { transform: scaleX(0.95) scaleY(1.05); }
}
Neon Text
.neon-text {
color: #fff;
animation: neonFlicker 3s linear infinite;
}
@keyframes neonFlicker {
0%, 100%, 92% { text-shadow: 0 0 5px #7f7cf0, 0 0 15px #7f7cf0, 0 0 25px #b892e8; }
93%, 95% { text-shadow: none; }
94%, 96% { text-shadow: 0 0 5px #7f7cf0, 0 0 15px #7f7cf0; }
}
Heartbeat
.heartbeat-text {
display: inline-block;
animation: heartbeat 1.3s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.2); }
28% { transform: scale(1); }
42% { transform: scale(1.2); }
70% { transform: scale(1); }
}
Spacing Out
.spacing-text {
display: inline-block;
animation: spacing 2.4s ease-in-out infinite;
}
@keyframes spacing {
0%, 100% { letter-spacing: 0px; }
50% { letter-spacing: 6px; }
}
Scrolling message · Scrolling message ·
/* wrap the marquee span in a fixed-width, overflow:hidden container */
.marquee-text {
display: inline-block;
white-space: nowrap;
animation: marquee 6s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
Fade In & Out
.fadeinout-text {
display: inline-block;
animation: fadeInOut 3s ease-in-out infinite;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
hover animations
Hover to Grow
.hover-grow {
display: inline-block;
transition: transform .25s ease;
}
.hover-grow:hover {
transform: scale(1.2);
}
Hover to Shake
.hover-shake {
display: inline-block;
}
.hover-shake:hover {
animation: hoverShake .35s ease-in-out infinite;
}
@keyframes hoverShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
Hover to Glow
.hover-glow {
display: inline-block;
transition: text-shadow .3s ease;
}
.hover-glow:hover {
text-shadow: 0 0 10px #ff9ecb, 0 0 20px #b892e8, 0 0 30px #7f7cf0;
}
Hover Underline Slide
.hover-underline {
position: relative;
display: inline-block;
}
.hover-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .3s ease;
}
.hover-underline:hover::after {
transform: scaleX(1);
transform-origin: left;
}
Hover Color Shift
.hover-color {
display: inline-block;
transition: color .3s ease;
}
.hover-color:hover {
color: #b892e8;
}
Hover to Tilt
.hover-tilt {
display: inline-block;
transition: transform .25s ease;
}
.hover-tilt:hover {
transform: rotate(-6deg) scale(1.05);
}
Hover Letter Spacing
.hover-letter {
display: inline-block;
transition: letter-spacing .3s ease;
}
.hover-letter:hover {
letter-spacing: 4px;
}
Flip
/* wrap each letter in its own span */
.hover-flip span {
display: inline-block;
transition: transform .3s ease;
}
.hover-flip:hover span:nth-child(1) { transform: rotateY(180deg); transition-delay: 0s; }
.hover-flip:hover span:nth-child(2) { transform: rotateY(180deg); transition-delay: .05s; }
.hover-flip:hover span:nth-child(3) { transform: rotateY(180deg); transition-delay: .1s; }
.hover-flip:hover span:nth-child(4) { transform: rotateY(180deg); transition-delay: .15s; }
Hover to Bounce
.hover-bounce {
display: inline-block;
}
.hover-bounce:hover {
animation: hoverBounce .5s ease;
}
@keyframes hoverBounce {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-10px); }
50% { transform: translateY(0); }
70% { transform: translateY(-4px); }
}
Hover Blur In
.hover-blur {
display: inline-block;
filter: blur(3px);
transition: filter .3s ease;
}
.hover-blur:hover {
filter: blur(0px);
}