- This topic is empty.
-
Topic
-
CSS animations are a great way to add visual interest and interactivity to your website. They can be relatively simple to implement and don’t require JavaScript, making them accessible even to those with basic CSS knowledge.
1. Fade In
Fades an element from transparent to opaque.
css.fade-in {
opacity: 0;
animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Usage:
html<div class="fade-in">Hello World</div>
2. Slide In
Slides an element in from the left.
css.slide-in {
transform: translateX(-100%);
animation:slideIn 1s ease-out forwards;
}@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Usage:
html<div class="slide-in">Hello World</div>
3. Bounce
Makes an element bounce up and down.
css.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Usage:
html<div class="bounce">Hello World</div>
4. Pulse
Creates a pulsing effect by scaling the element.
css.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
Usage:
html<div class="pulse">Hello World</div>
5. Rotate
Rotates an element continuously.
css.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
Usage:
html<div class="rotate">Hello World</div>
6. Zoom In
Zooms an element in from a smaller size.
css.zoom-in {
transform: scale(0);
animation: zoomIn 1s ease-out forwards;
}
@keyframes zoomIn {
from {
transform: scale(0);
opacity: 0;
}
to{
transform: scale(1);
opacity: 1;
}
}
Usage:
html<div class="zoom-in">Hello World</div>
7. Shake
Makes an element shake side-to-side.
css.shake {
animation: shake 0.5s ease-in-out;
}@keyframes shake
{
0% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
Usage:
html<div class="shake">Hello World</div>
8. Flip
Flips an element horizontally.
css.flip {
transform: rotateY(0);
animation: flip 2s infinite;
}
@keyframes flip {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
Usage:
html<div class="flip">Hello World</div>
9. Text Color Change
Changes the text color smoothly.
css.text-color-change {
animation: colorChange 3s infinite;
}
@keyframes colorChange {
0% {
color: #ff0000; /* Red */
}
50%{
color: #00ff00; /* Green */
}
100% {
color: #0000ff; /* Blue */
}
}
Usage:
html<div class="text-color-change">Hello World</div>
10. Underline Animation
Adds an animated underline effect.
css.underline {
position: relative;
display: inline-block;
}
.underline::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #000;
transition: width 0.3s;
}.underline:hover::after {
width: 100%;
}
Usage:
html<a href="#" class="underline">Hover over me</a>
- You must be logged in to reply to this topic.