CSS Animation Effects
Showing 82–108 of 140 effects
Progress Bar
ProgAnimated progress bar
.progress-bar { width: 300px; height: 20px; background: #e9ecef; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #28a745, #20c997); width: 0%; animation: progress 3s ease-in-out forwards; }
@keyframes progress { to { width: 75%; } }
Bounce In Scroll
ScrollBounces in on scroll
.bounce-in { opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease; }
.bounce-in.visible { opacity: 1; transform: translateY(0); animation: bounce 0.5s ease; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
Fade Scale Scroll
ScrollFades and scales on scroll
.fade-scale { opacity: 0; transform: scale(0.7); transition: opacity 1s ease, transform 1s ease; }
.fade-scale.visible { opacity: 1; transform: scale(1); }
Flip In Scroll
ScrollFlips in vertically on scroll
.flip-in { transform: rotateX(-90deg); transition: transform 1s ease; }
.flip-in.visible { transform: rotateX(0deg); }
Slide Right Scroll
ScrollSlides in from right on scroll
.slide-right { transform: translateX(100%); transition: transform 1s ease; }
.slide-right.visible { transform: translateX(0); }
Scale Up Scroll
ScrollScales up with shadow on scroll
.scale-up { transform: scale(0.8); transition: transform 1s ease, box-shadow 1s ease; }
.scale-up.visible { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
Blur In Scroll
ScrollFades in with blur effect on scroll
.blur-in { opacity: 0; filter: blur(5px); transition: opacity 1s ease, filter 1s ease; }
.blur-in.visible { opacity: 1; filter: blur(0); }
Fade Up Scroll
ScrollFades and moves up on scroll
.fade-up { opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
Rotate In Scroll
ScrollRotates in on scroll
.rotate-in { transform: rotate(-90deg); transition: transform 1s ease; }
.rotate-in.visible { transform: rotate(0deg); }
Zoom In Scroll
ScrollZooms in on scroll
.zoom-in { transform: scale(0.5); transition: transform 1s ease; }
.zoom-in.visible { transform: scale(1); }
Slide In Scroll
ScrollSlides in from left on scroll
.slide-in { transform: translateX(-100%); transition: transform 1s ease; }
.slide-in.visible { transform: translateX(0); }
Slide In Scroll 46
ScrollSlides element in on scroll
.slide-in-46 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-46.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 41
ScrollSlides element in on scroll
.slide-in-41 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-41.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 32
ScrollSlides element in on scroll
.slide-in-32 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-32.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 24
ScrollSlides element in on scroll
.slide-in-24 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-24.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 8
ScrollSlides element in on scroll
.slide-in-8 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-8.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 6
ScrollSlides element in on scroll
.slide-in-6 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-6.visible {
opacity: 1;
transform: translateX(0);
}
Slide In Scroll 3
ScrollSlides element in on scroll
.slide-in-3 {
opacity: 0;
transform: translateX(-100px);
transition: all 0.5s ease-out;
}
.slide-in-3.visible {
opacity: 1;
transform: translateX(0);
}
Fade In Scroll
ScrollFades in on scroll
.fade-in { opacity: 0; transition: opacity 1s ease; }
.fade-in.visible { opacity: 1; }
Slide Up
SlideSlide up animation
.slide-up { transform: translateY(100%); animation: slideUp 1s ease forwards; }
@keyframes slideUp { to { transform: translateY(0); } }
Slide Right
SlideSlide in from right
.slide-right { transform: translateX(100%); animation: slideRight 1s ease forwards; }
@keyframes slideRight { to { transform: translateX(0); } }
Slide Down
SlideSlide down animation
.slide-down { transform: translateY(-100%); animation: slideDown 1s ease forwards; }
@keyframes slideDown { to { transform: translateY(0); } }
Slide In Left
SlideSlides in from left
.slide-left { transform: translateX(-100%); animation: slideLeft 1s ease forwards; }
@keyframes slideLeft { to { transform: translateX(0); } }
Bounce Spinner
SpinnerBouncing ball spinner
.bounce-spinner { width: 40px; height: 40px; background: #6a5acd; border-radius: 50%; animation: bounce-spin 1s ease infinite; }
@keyframes bounce-spin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
Ring Spinner
SpinnerRotating ring with gradient
.ring-spinner { width: 40px; height: 40px; border: 4px solid transparent; border-radius: 50%; background: linear-gradient(45deg, #ff4500, #ff8c00) border-box; animation: ring-spin 1s linear infinite; }
@keyframes ring-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Wave Spinner
SpinnerWave-like spinning bars
.wave-spinner { width: 60px; height: 20px; display: flex; justify-content: space-between; }
.wave-spinner div { width: 8px; height: 20px; background: #20b2aa; animation: wave 1.2s ease-in-out infinite; }
.wave-spinner div:nth-child(2) { animation-delay: 0.2s; }
.wave-spinner div:nth-child(3) { animation-delay: 0.4s; }
@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }
Grow Spinner
SpinnerGrowing and shrinking spinner
.grow-spinner { width: 40px; height: 40px; background: #ffa500; border-radius: 50%; animation: grow 1.5s ease infinite; }
@keyframes grow { 0% { transform: scale(0.5); } 50% { transform: scale(1.2); } 100% { transform: scale(0.5); } }
CSSTOOLBOX is a free CSS and Tailwind toolbox offering online generators for gradients, shadows, layouts, animations, and color palettes for modern web development.