CSS Animation Effects

Showing 55–81 of 140 effects

Rotate Hover

Hover

Rotates element slightly on hover

                                                .rotate-hover { transition: transform 0.3s ease; }
.rotate-hover:hover { transform: rotate(5deg); }                                            

Download

Rotate Hover 35

Hover

Rotates element on hover

                                                .rotate-hover-35 {
  transition: transform 0.3s ease;
}
.rotate-hover-35:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 34

Hover

Rotates element on hover

                                                .rotate-hover-34 {
  transition: transform 0.3s ease;
}
.rotate-hover-34:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 23

Hover

Rotates element on hover

                                                .rotate-hover-23 {
  transition: transform 0.3s ease;
}
.rotate-hover-23:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 17

Hover

Rotates element on hover

                                                .rotate-hover-17 {
  transition: transform 0.3s ease;
}
.rotate-hover-17:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 15

Hover

Rotates element on hover

                                                .rotate-hover-15 {
  transition: transform 0.3s ease;
}
.rotate-hover-15:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 13

Hover

Rotates element on hover

                                                .rotate-hover-13 {
  transition: transform 0.3s ease;
}
.rotate-hover-13:hover {
  transform: rotate(5deg);
}                                            

Download

Rotate Hover 11

Hover

Rotates element on hover

                                                .rotate-hover-11 {
  transition: transform 0.3s ease;
}
.rotate-hover-11:hover {
  transform: rotate(5deg);
}                                            

Download

Sepia Hover

Hover

Sepia filter on hover

                                                .sepia-hover { transition: filter 0.3s ease; cursor: pointer; }
.sepia-hover:hover { filter: sepia(1); }                                            

Download

Invert Hover

Hover

Invert Colors

Color invert on hover

                                                .invert-hover { transition: filter 0.3s ease; cursor: pointer; }
.invert-hover:hover { filter: invert(1); }                                            

Download

Zoom Out Hover

Hover

Zoom Out

Zoom out effect on hover

                                                .zoom-out-hover { transition: transform 0.3s ease; cursor: pointer; }
.zoom-out-hover:hover { transform: scale(0.9); }                                            

Download

Saturate Hover

Hover

Saturation filter on hover

                                                .saturate-hover { transition: filter 0.3s ease; cursor: pointer; }
.saturate-hover:hover { filter: saturate(2); }                                            

Download

Flip Horizontal

Hover

FLIP

Horizontal flip on hover

                                                .flip-horizontal { transition: transform 0.6s; cursor: pointer; }
.flip-horizontal:hover { transform: scaleX(-1); }                                            

Download

Contrast Hover

Hover

Contrast filter on hover

                                                .contrast-hover { transition: filter 0.3s ease; cursor: pointer; }
.contrast-hover:hover { filter: contrast(1.5); }                                            

Download

Brightness Hover

Hover

Brightness filter on hover

                                                .brightness-hover { transition: filter 0.3s ease; cursor: pointer; }
.brightness-hover:hover { filter: brightness(1.3); }                                            

Download

Opacity Hover

Hover

Opacity change on hover

                                                .opacity-hover { opacity: 0.6; transition: opacity 0.3s ease; cursor: pointer; }
.opacity-hover:hover { opacity: 1; }                                            

Download

Flip Vertical

Hover

Flip

Vertical flip on hover

                                                .flip-vertical { transition: transform 0.6s; cursor: pointer; }
.flip-vertical:hover { transform: rotateX(180deg); }                                            

Download

Shadow Hover

Hover

Box shadow on hover

                                                .shadow-hover { transition: box-shadow 0.3s ease; cursor: pointer; }
.shadow-hover:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.3); }                                            

Download

Blur Hover

Hover

Blur effect on hover

                                                .blur-hover { transition: filter 0.3s ease; cursor: pointer; }
.blur-hover:hover { filter: blur(3px); }                                            

Download

Skew Hover

Hover

Skew Me

Skew transform on hover

                                                .skew-hover { transition: transform 0.3s ease; cursor: pointer; }
.skew-hover:hover { transform: skew(-10deg, 0); }                                            

Download

Zoom In Hover

Hover

Zooms in on hover with overflow hidden

                                                .zoom-hover { width: 200px; height: 150px; overflow: hidden; cursor: pointer; }
.zoom-hover img { width: 100%; height: 100%; transition: transform 0.3s ease; }
.zoom-hover:hover img { transform: scale(1.2); }                                            

Download

Slide Up Hover

Hover

Hover Me

Slides up on hover

                                                .slide-up { transform: translateY(20px); opacity: 0; transition: all 0.3s ease; }
.slide-up:hover { transform: translateY(0); opacity: 1; }                                            

Download

Flip Card

Hover

Front

Back

Card flip effect on hover

                                                .flip-card { perspective: 1000px; width: 200px; height: 200px; }
.flip-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.flip-back { background: #28a745; color: white; transform: rotateY(180deg); }
.flip-front { background: #007bff; color: white; }                                            

Download

Rotate Hover

Hover

Rotates element on hover

                                                .rotate-hover { transition: transform 0.3s ease; }
.rotate-hover:hover { transform: rotate(15deg); }                                            

Download

Scale Hover

Hover

Scales element on hover

                                                .scale-hover { transition: transform 0.3s ease; }
.scale-hover:hover { transform: scale(1.1); }                                            

Download

Zoom Image 4

Image

Zoom in image on hover

                                                .zoom-img-4 {
  transition: transform 0.3s ease;
}
.zoom-img-4:hover {
  transform: scale(1.2);
}                                            

Download

Loading Dots

Load

Three dot loading animation

                                                .loading-dots { display: flex; gap: 5px; }
.loading-dots div { width: 10px; height: 10px; background: #333; border-radius: 50%; animation: bounce-dots 1.4s ease-in-out infinite both; }
.loading-dots div:nth-child(1) { animation-delay: -0.32s; }
.loading-dots div:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce-dots { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }                                            

Download

CSSTOOLBOX is a free CSS and Tailwind toolbox offering online generators for gradients, shadows, layouts, animations, and color palettes for modern web development.

CSS Layouts Library