CSS Animation Effects
Showing 136–140 of 140 effects
Typing Text 10
TextTyping effect text...
Typing animation for text
.typing-text-10 {
width: 20ch;
overflow: hidden;
border-right: 3px solid;
white-space: nowrap;
animation: typing 4s steps(20), blink 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 20ch }
}
@keyframes blink {
50% { border-color: transparent }
}
Typing Text 5
TextTyping effect text...
Typing animation for text
.typing-text-5 {
width: 20ch;
overflow: hidden;
border-right: 3px solid;
white-space: nowrap;
animation: typing 4s steps(20), blink 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 20ch }
}
@keyframes blink {
50% { border-color: transparent }
}
Text Shadow Hover
TextHover for Shadow
Text shadow effect on hover
.text-shadow-hover { font-size: 24px; color: #333; transition: text-shadow 0.3s ease; cursor: pointer; }
.text-shadow-hover:hover { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
Neon Text
TextNEON TEXT
Neon glowing text effect
.neon-text { font-size: 24px; color: #fff; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00; animation: neon-flicker 1.5s infinite alternate; }
@keyframes neon-flicker { 0%, 100% { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00; } 50% { text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00; } }
Typewriter Effect
TextThis is a typewriter effect!
Typewriter text animation
.typewriter { overflow: hidden; border-right: 2px solid #333; white-space: nowrap; margin: 0 auto; animation: typing 3s steps(40, end), blink 0.75s step-end infinite; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { from, to { border-color: transparent; } 50% { border-color: #333; } }