Animation & Effects Reference for Pure CSS and more!

List of standard animation and transition effects you can easily create with CSS, SASS or similar web-developer languages that support animation.

The code for animation effects is licenced under MIT Licence! :)

Share our project with your friends and colleagues!

CSS Appear Disappear animation

Simple pure CSS animation that makes an HTML element appear and or disappear using the opacity CSS property.

<style>
.appear-disappear {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: appear-disappear;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
    
@keyframes appear-disappear {
	/* We set opacity to zero at the start 
	of the animation. At 50% play time, 
	here after 2s, the HTML element will
	be fully opaque (appear). Then */
	0% { opacity:0; } 
	50% { opacity:1;}
	100% { opacity:0; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Ascend animation

Simple pure CSS animation effect to let an HTML element ascend using the transform#translateY CSS property.

<style>
.ascend {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: ascend;
	animation-duration: 5s;
	animation-iteration-count: infinite;	
}
    
@keyframes ascend {
	/* We first translate our HTML element
	   in Y direction, to make it look like
	   our element begins to rise from the 
	   floor.

	   Change the values as needed.
	*/
	0% { transform: translateY(40%); }
	100% { transform: translateY(-50%); }	
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Blast Color animation

Pure CSS animation effect to change the color of an HTML element from monochrome to fully saturated using the filter#saturate CSS property.

<style>
.blast-color {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: blast-color;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes blast-color {
	0% { filter: saturate(0); }
	15% { filter: saturate(0); }
	50% { filter: saturate(100%); }
	98% { filter: saturate(400%); }
	100% { filter: saturate(400%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Blinds animation

Pure CSS window blinds animation from top to bottom using the CSS properties transform#translateY and transform#scaleY to achieve this effect. For left to right blinds CSS animation, see our blinds-left-to-right effect.

<style>
.blinds {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: blinds;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes blinds {
	0% { transform: translateY(-50%) scaleY(0.01); }
	50% { transform: translateY(-10%) scaleY(.7); }
	70% { transform: translateY(5%) scaleY(1); }
	100% { transform: translateY(5%) scaleY(1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Blinds Left to Right animation

Pure CSS window blinds animation from left to right using the CSS properties transform#translateX and transform#scaleX to achieve this effect. Check out our simple top to bottom blinds CSS animation effect.

<style>
.blinds-left-to-right {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: blinds-left-to-right;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes blinds-left-to-right {
	0% { transform: translateX(-50%) scaleX(0.01); }
	50% { transform: translateX(-10%) scaleX(.7); }
	70% { transform: translateX(5%) scaleX(1); }
	100% { transform: translateX(5%) scaleX(1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Blink animation

The CSS blinking animation effect can be achieved using the CSS property opacity. Change the animation duration, for faster or slower blinking speed. See our blink-with-pause CSS animation if you want to include a pause in your blinking animation.

<style>
.blink {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: blink;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
	
@keyframes blink {
	0% { opacity:0; }
	50% { opacity:1; }
	100% { opacity:0; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Blink with pause animation

The CSS blink with pause animation effect can be achieved using the CSS property opacity. Change the animation duration, for faster or slower blinking speed. See our blink CSS animation for a simple blink effect without a pause in between frames.

<style>
.blink-with-pause {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: blink-with-pause;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
	
@keyframes blink-with-pause {
	0% { opacity:0; }
	15% { opacity:1; }
	30% { opacity:0; }
	42% { opacity:1; }
	60% { opacity:0; }
	/* Pause starts here, increase
	   the pause duration by changing
	   the values as needed */
	65% { opacity:1; }
	100% { opacity:1; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Boomerang animation

Do boxes fly like a boomerang? - Ours do ;). You can use the CSS property transform with the transform functions transform#scale and transform#translate in your animation keyframes to achieve this effect.

<style>
.boomerang {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: boomerang;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
			
@keyframes boomerang {
	0% { transform: scale(0.08) translate(0, 0); }
	5% { transform: scale(0.1) translate(50%, 10%); }
	25% { transform: scale(0.25) translate(200%, -50%); }
	50% { transform: scale(1) translate(0, 30%); }
	75% {  transform: scale(0.25) translate(-200%, -50%); }
	95% { transform: scale(0.05) translate(-50%, 5%); }
	100% { transform: scale(0.05) translate(0, 0); }		
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Bounce animation

Bouncing animation of an HTML element written in pure CSS using the property transform#translate and CSS transform function transform#scale to achieve this effect.

<style>
.bounce {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: bounce;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.5,1,1,1);				
}
			
@keyframes bounce {
	0% { transform:  translate(0, -30%); }
	50% { transform: translate(0px, 0px); }
	51% { transform: translate(0px, -10%); }
	100% { transform: scale(.99) translate(0, -30%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Box Appear and Disappear animation

Similar to appear and disappear, the opacity of the box changes from 0 to 1 back to 0. Additionally we use the CSS transform function transform#scale the box size from 0 to 1 and back to 0.

<style>
.box-appear-and-disappear {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: box-appear-and-disappear;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
}
		
@keyframes box-appear-and-disappear {
	0% { opacity:0; transform: scale(0);}
	50% { opacity:1; transform: scale(1);}
	100% { opacity:0; transform: scale(0);}			
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Center Revolve animation

Rotate an HTML element around its center, using pure CSS property transform#rotate. In this effect the rotation rotates clockwise first, then changes direction to anti-clockwise.

<style>
.center-revolve {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: center-revolve;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.5,1,1,1);
}
			
@keyframes center-revolve {
	/* 0% { transform:  } */
	50% { transform: rotate(360deg); }
	/*100% { transform: ; }*/
}</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Compress X animation

Compress a HTML element in X-direction with the transform#scale CSS transform function.

<style>
.compress-x {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: compress-x;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
	
@keyframes compress-x {
	0% { transform: scale(1, 1); }
	25% {  transform: scale(0.5, 1); }
	30% {  transform: scale(.6, 1); }
	50% {  transform: scale(.3, 1); }
	75% {  transform: scale(0.1, 1.5)  }
	78% {  transform: scale(0.2, 1)  }
	100% { transform: scale(1, 1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Compress Y animation

Similar to compress-x , compress a HTML element in Y-direction with the transform#scale CSS transform function.

<style>
.compress-y {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: compress-y;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes compress-y {
	0% { transform: scale(1, 1); }
	25% {  transform: scale(1, 0.5); }
	30% {  transform: scale(1, 0.6); }
	50% {  transform: scale(1, .3); }
	75% {  transform: scale(1.5, 0.1)  }
	78% {  transform: scale(1, 0.2)  }
	100% { transform: scale(1, 1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Crawl animation

Crawling animation effect for an HTML element using the CSS properties transform#translate and tranform functions transform#rotate .

<style>
.crawl {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: crawl;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
			
@keyframes crawl {
	/*0% { transform:  rotate(5); }*/
	12.5% { transform: translate(10%, 0) rotate(-15deg); }
	25% { transform:  translate(15%, 0) rotate(5deg); }
	37.5% { transform: translate(25%, 0) rotate(-15deg); }
	50% { transform:  translate(30%, 0) rotate(5deg); }
	62.5% { transform:  translate(40%, 0) rotate(-15deg); }
	75% { transform:  translate(45%, 0) rotate(5deg); }
	100% { transform:  translate(55%, 0) rotate(-15deg); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Credits animation

CSS Roll credits style animation effect for a HTML element using the CSS transform function tranform#translate .

<style>
.credits {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: credits;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
			
@keyframes credits {
	/* cool cut out view
	0% { transform: translate(0, 0); 
		clip-path: polygon(0 0, 100% 0%, 100% 26%, 0 26%); }
	50% { transform: translate(0, -100%); 
		clip-path: polygon(0 0, 100% 0%, 100% 26%, 0 14%); }
	*/
	/* half half show
	0% { transform: translate(0, 0); 
		clip-path: polygon(0 0, 100% 0%, 100% 0%, 0 0%); }
	50% { transform: translate(0, -100%); 
		clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%); }
	/*52% { transform: translate(0, -100%); 
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); }
		*
	100% { transform: translate(0, -100%); 
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); }	
		*/

	0% { transform: translate(0, 0%); 
		clip-path: polygon(0 0, 100% 0%, 100% 20%, 0 20%); }
	50% { transform: translate(0, -50%); 
		clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%); }
	75% { transform: translate(0, -100%); 
		clip-path: polygon(0 80%, 100% 80%%, 100% 80%, 0 80%); }	
	100% { transform: translate(0, 0%); 
		clip-path: polygon(0 0, 100% 0%, 100% 20%, 0 20%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Curve Up animation

Propel an HTML element in a curve up motion into Z-direction using CSS tranform functions transform#scale and transform#translate.

<style>
.curve-up {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: curve-up;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
				
@keyframes curve-up {
	0% {  transform: scale(1,1) translate(0%, 50%); }
	5% {  transform: scale(0.8, 0.8) translate(60%, 0); }
	50% {  transform: scale(0, 0) translate(100%, -150%); }
	100% {  transform: scale(1, 1) translate(0%, 50%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Curve Down animation

Propel an HTML element in a curve down motion into Z-direction using CSS tranform functions transform#scale and transform#translate. Similar to curve-up.

<style>
.curve-down {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: curve-down;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
				
@keyframes curve-down {
	0% {  transform: scale(1,1) translate(0%, 0%); }
	5% {  transform: scale(0.5, 0.5) translate(60%, 50%); }
	50% {  transform: scale(0, 0) translate(250%, 250%); }
	100% {  transform: scale(1, 1) translate(0%, 0%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Curve Erratic animation

Propel an HTML element in a erratic curve motion into Z-direction using CSS tranform functions transform#scale and transform#translate. Similar to curve-up.

<style>
.curve-erratic {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: curve-erratic;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
				
@keyframes curve-erratic {
	0% {  transform: scale(1,1) translate(0%, 0%); }
	5% {  transform: scale(0.8, 0.8) translate(60%, 50%); }
	15% {  transform: scale(0.8, 0.8) translate(30%, 60%); }
	40% {  transform: scale(0, 0) translate(-250%, 250%); }
	70% {  transform: scale(0, 0) translate(250%, 250%); }
	85% {  transform: scale(0.8, 0.8) translate(60%, 50%); }
	95% {  transform: scale(0.8, 0.8) translate(30%, 60%); }
	100% {  transform: scale(1, 1) translate(0%, 0%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Darken animation

The darken CSS effect can be achieved by animating the CSS filter function filter#brightness from 100% to zero.

<style>
.darken {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: darken;
	animation-duration: 4s;
	animation-iteration-count: infinite;	
}
			
@keyframes darken {
	/* 0% {  } */
	100% { filter: brightness(0); }		
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS De-Saturate animation

Animate the saturation of an HTML element with the filter#saturation CSS filter function.

<style>
.de-saturate {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: de-saturate;
	animation-duration: 4s;
	animation-iteration-count: infinite;	
}
		
@keyframes de-saturate {
	0% {  }
	100% { filter: saturate(0); }		
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Descend animation

Similar to the CSS animation effect ascend we use the CSS transform transform#translate and transform#scale functions to let an HTML element descend from the virtual sky.

<style>
.descend {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: descend;
	animation-duration: 5s;
	animation-iteration-count: infinite;	
}
	
@keyframes descend {
	/* We first translate our HTML element
	   in Y direction, to make it look like
	   our element begins to descend from the 
	   sky.
	   Change the values as needed.
	*/
	0% { transform: translateY(-150%) scale(.7, .7); }
	100% { transform: translateY(50%); }	
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Different color animation

To change the color of an HTML element we can use the CSS filter#hue-rotate function.

<style>
.different-color {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: different-color;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
			
@keyframes different-color {
	0% { filter: hue-rotate(0); }		
	100% {  filter: hue-rotate(90deg); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Float animation

We can achieve a simple floating CSS animation effect by applying the transform#translate CSS transform function.

<style>
.float {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: float;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
			
@keyframes float {
	0% { transform:  translate(0, 50%);  }
	20% { transform: translate(0, -50%); }
	30% { transform: translate(0, -20%); }
	50% { transform: translate(0, -50%); }
	60% { transform: translate(0, -30%); }
	80% { transform: translate(0, -60%); }
	100% { transform: translate(0, -40%); }
}

</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Grow Shrink animation

Grow and shrink an HTML element using the transform#scale CSS tranform function.

<style>
.grow-shrink {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: grow-shrink;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
			
@keyframes grow-shrink {
	0% { transform:  scale(0); }
	12.5% { transform:  scale(1,1); }
	25% { transform: scale(0.1,1); }
	37.5% { transform: scale(1, 1); }
	50% { transform: scale(1, 0.1); }
	62.5% { transform: scale(1,1); }
	75% { transform: scale(.1, .1); }
	100% { transform: scale(0); ; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Grow Step-wise animation

Step-wise Grow and shrink an HTML element using the transform#scale CSS tranform function.

<style>
.grow-step-wise {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: grow-step-wise;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
			
@keyframes grow-step-wise {
	0% { transform:  scale(0); }
	12.5% { transform:  scale(.5,.5); }
	25% { transform: scale(0.2,.2); }
	37.5% { transform: scale(1, 1); }
	50% { transform: scale(.6, 0.6); }
	62.5% { transform: scale(1.5,1.5); }
	75% { transform: scale(.7, .7); }
	75% { transform: scale(1, 1); }
	100% { transform: scale(0); ; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Helix in Z Direction animation

To create the moving helical CSS effect we adapt the spinner animation, and adjust it with transform#scale css property.

<style>
.helix-in-z-direction {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: helix-in-z-direction;
	
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
			
@keyframes helix-in-z-direction {
	0% {    transform: translate(0, -50%); }
	6.25% { transform: translate(19%, -46%) scale(0.9375, 0.9375); }
	12.5% { transform: translate(35.35%, -35.35%) scale(0.875, 0.875); }
	18.25% { transform: translate(46%, -19%) scale(0.8125, 0.8125); } 
	25% {   transform: translate(50%, 0) scale(0.75, 0.75); }
	31.25% { transform: translate(46%, 19%) scale(0.6875, 0.6875); }
	37.5% { transform: translate(35.35%, 35.35) scale(0.625 , 0.625); }
	43.75% { transform: translate(19%, 46%) scale(0.5625 , 0.5625); }
	50% {   transform: translate(0, 50%) scale(0.5 , 0.5); }
	
	56.25% { transform: translate(-19%, 46%) scale(0.4375 , 0.4375); }
	62.5% { transform: translate(-35.35, 35.35%) scale(0.375 , 0.375); }
	68.75% { transform: translate(-46%, 19%) scale(0.3125 , 0.3125); }
	75% {   transform: translate(-50%, 0) scale(0.25 , 0.25); }
	81.25% { transform: translate(-46%, -19%) scale(0.1875 , 0.1875); }
	87.5% { transform: translate(-35.35%, -35.35%) scale(0.125 , 0.125); }
	93.75% { transform: translate(-19%, -46%) scale(0.0625 , 0.0625); }
	100% {  transform: translate(0, -50%) scale(0.0625 , 0.0625); }

}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Light Speed animation

Propel an HTML element with light speed to the right using a combination of the CSS tranform functions transform#translate and transform#scale, and the CSS property opacity. See light-speed-z for light speed in Z-direction.

<style>
.light-speed {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: light-speed;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.5,1,1,1);	
}
				
@keyframes light-speed {
	/* Light speed jump. */
	0% {  transform: translate(-10px, 0); }
	5% {  transform: scale(0.9, 1) translate(-25px, 0); }
	5.5% {  transform: scale(1, .5) translate(-0px, 0); }
	25% {  transform: scale(25, .1) translate(80px, 0); }
	30% {  opacity(0); }
	50.4% {  transform: scale(100, 0) translate(100px, 0); }
	50.5% { opacity: 0; transform: translate(-160px, 0);}
	/* Light speed slow down. */
	60% { opacity: 0; transform: scale(2, 0) translate(-40px, 0);}
	60.1% { opacity: .5; transform: scale(2, 1) translate(-21px, 0);}
	60.4% { opacity: .5; }
	60.5% { opacity: 1; transform: scale(4, 1) translate(-20px, 0);}
	61.5% { opacity: 1; transform: scale(1, 1) translate(-10px, 0);}
	100% {  transform: scale(1, 1) translate(0px, 0); }		
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Light Speed Z animation

Propel an HTML element with light speed in Z-direction using a combination of the CSS tranform functions transform#translate and transform#scale, and the CSS property opacity. Check out our other light-speed effect.

<style>
.light-speed-z {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: light-speed-z;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	/*animation-timing-function: cubic-bezier(.5,1,1,1);*/
}
			
@keyframes light-speed-z {
	/* Light speed jump. */
	0% {  transform: translate(0, 0); }
	5% {  transform: scale(1.5, 1.5) translate(0, 0); }
	5% {  transform: scale(.5, .5) translate(0, 0); }
	5.5% {  transform: scale(.1, .1) translate(0, 0); }
	25% {  transform: scale(0, 0) translate(0, -30px); }
	
	/* Light speed slow down. */
	60% { opacity: 0; transform: scale(0, 0) translate(0, 0);}
	60.1% { opacity: .5; transform: scale(4, 4) translate(0, 0);}
	60.4% { opacity: .5; }
	60.5% { opacity: 1; transform: scale(4, 4) translate(0, 0);}
	61.5% { opacity: 1; transform: scale(1.1, 1.1) translate(0, 0);}
	100% {  transform: scale(1, 1) translate(0px, 0); }		
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Pinball animation

Pinball-like CSS animation effect using the CSS property transform with the transform functions transform#scale and transform#translate to achieve this effect.

<style>
.pinball {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: pinball;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
			
@keyframes pinball {
	0% { transform: scale(0.1) translate(300%, 0); }
	5% { transform: scale(0.1) translate(-300%, 10%); }
	10% { transform: scale(0.15) translate(-180%, 20%); }
	20% { transform: scale(0.2) translate(250%, 25%); }
	25% { transform: scale(0.3) translate(-120%, 30%); }
	30% { transform: scale(0.35) translate(100%, 35%); }
	40% { transform: scale(0.5) translate(-50%, 50%); }
	50% { transform: scale(1) translate(0, 100%); }
	55% { transform: scale(0.1) translate(-250%, 40%); }
	70% { transform: scale(0.2) translate(-10%, 35%); }
	75% { transform: scale(0.3) translate(150%, 30%); }
	85% { transform: scale(0.3) translate(-180%, 25%); }
	95% { transform: scale(0.5) translate(200%, 10%); }
	100% { transform: scale(0.1) translate(400%, 0%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Sling animation

Slings an HTML element into Z-direction using a combination of the CSS transform functions transform#translate and transform#scale.

<style>
.sling {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: sling;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
			
@keyframes sling {
	0% {  transform: scale(1,1) translate(0%, 50%); }
	5% {  transform: scale(.75, .75) translate(50%, -25%); }
	10% {  transform: scale(.5, .5) translate(100%, -50%); }
	15% {  transform: scale(.4, .4) translate(0%, -50%); }
	20% {  transform: scale(.6, .6) translate(-50%, -50%); }
	25% {  transform: scale(.75, .75) translate(-100%, -25%); }
	35% {  transform: scale(.8, .8) translate(0%, 0%); }
	
	35% {  transform: scale(1, 1) translate(100%, 25%); }
	40% {  transform: scale(.1, .1) translate(370%, 0); }
	100% {  transform: scale(.0, .0) translate(500%, 0); }
}</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Snake animation

Snake-like CSS animation effect using the CSS property transform with the transform functions transform#scale and transform#translate to achieve this effect.

<style>
.snake {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: snake;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
		
@keyframes snake {
	0% { transform: scale(0.1) translate(200%, 0); }
	5% { transform: scale(0.1) translate(-100%, 10%); }
	10% { transform: scale(0.15) translate(-180%, 20%); }
	20% { transform: scale(0.2) translate(150%, 25%); }
	25% { transform: scale(0.3) translate(-120%, 30%); }
	30% { transform: scale(0.35) translate(100%, 35%); }
	40% { transform: scale(0.5) translate(-50%, 50%); }
	50% { transform: scale(1) translate(0, 50%); }
	60% { transform: scale(0.5) translate(50%, 40%); }
	70% { transform: scale(0.35) translate(-120%, 35%); }
	75% { transform: scale(0.2) translate(150%, 30%); }
	85% { transform: scale(0.15) translate(-180%, 25%); }
	95% { transform: scale(0.1) translate(100%, 10%); }
	100% { transform: scale(0.1) translate(200%, 0%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spin animation

Spin an HTML element around its center axis using the CSS transform function transform#rotate .

<style>
.spin {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spin;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
			
@keyframes spin {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spin Horizontal animation

Rotate an HTML element in the 3D horizontal plane using the transform#scale CSS transform function.

<style>
.spin-horizontal {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spin-horizontal-3d;
	animation-duration: 2s;
	animation-iteration-count: infinite;	
}
			
@keyframes spin-horizontal-3d {
	0% {  transform: scale(1,1) translate(-100px, 0); }
	5% {  transform: scale(0.9, 1) translate(-15px, 0); }
	5.5% {  transform: scale(1, 1) translate(-0px, 0); }
	50% {  transform: scale(0, 0) translate(300px, 30px); }
	51% {  transform: scale(0, 0) translate(-300px, 0); }	
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spinner animation

The spinner animation for an arbitraty HTML element can be achieved using math's sinus and cosine to calculate the correct transform#translate position for each step rotating clockwise on a imaginary circle.

<style>
.spinner {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spinner;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
}
			
@keyframes spinner {
	/* Calculated steps using sin, cos functions. */
	0% {    transform: translate(0, -50%) }
	6.25% { transform: translate(19%, -46%) }
	12.5% { transform: translate(35.35%, -35.35%) ; }
	18.25% { transform: translate(46%, -19%) }
	25% {   transform: translate(50%, 0) ; }
	31.25% { transform: translate(46%, 19%) }
	37.5% { transform: translate(35.35%, 35.35) ; }
	43.75% { transform: translate(19%, 46%) }
	50% {   transform: translate(0, 50%) ; }
	56.25% { transform: translate(-19%, 46%) }
	62.5% { transform: translate(-35.35, 35.35%) ; }
	68.75% { transform: translate(-46%, 19%) }
	75% {   transform: translate(-50%, 0) ; }
	81.25% { transform: translate(-46%, -19%) }
	87.5% { transform: translate(-35.35%, -35.35%) ; }
	93.75% { transform: translate(-19%, -46%) }
	100% {  transform: translate(0, -50%) ; }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spinner Diamond animation

Spin an HTML element clockwise in a diamond pattern by applying the CSS transform function transform#translate.

<style>
.spinner-diamond {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spinner-diamond;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
			
@keyframes spinner-diamond{
	0% {  transform: translate(0, 0); }
	0.5% {  transform: translate(0, -20px); }
	25% { transform: translate(30px, 0px); }
	50% { transform: translate(0px, 20px); }
	75% { transform: translate(-30px, 0px); }
	100% { transform: translate(0px, -20px); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Spinner Erratic animation

Erratic spinner animation effect coded in CSS for a HTML element using the CSS property transform and its function tranform#translate.

<style>
.spinner-erratic {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spinner-erratic;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	
}
			
@keyframes spinner-erratic {
	0% {    transform: translate(0, -50%) }
	6.25% { transform: translate(30%, -19%) }
	12.5% { transform: translate(35.46%, -35.46%) ; }
	18.25% { transform: translate(30%, -15.56%) }
	25% {   transform: translate(50%, 0) ; }
	31.25% { transform: translate(30%, 15.56%) }
	37.5% { transform: translate(35.46%, 35.46) ; }
	43.75% { transform: translate(30%, 15.56%) }
	50% {   transform: translate(0, 50%) ; }
	62.5% { transform: translate(-35.46, 35.46%) ; }
	75% {   transform: translate(-50%, 0) ; }
	87.5% { transform: translate(-35.46%, -35.46%) ; }
	100% {  transform: translate(0, -50%) ; }
	
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spiral animation

Simple spiral CSS animation effect in Z-direction by applying the CSS property transform and its functions tranform#scale and transform#translate.

<style>
.spiral {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spiral;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
			
@keyframes spiral {
	0% {    transform: translate(0, -50%); }
	6.25% { transform: translate(19%, -46%) scale(0.9375, 0.9375); }
	12.5% { transform: translate(35.35%, -35.35%) scale(0.875, 0.875); }
	18.25% { transform: translate(46%, -19%) scale(0.8125, 0.8125); } 
	25% {   transform: translate(50%, 0) scale(0.75, 0.75); }
	31.25% { transform: translate(46%, 19%) scale(0.6875, 0.6875); }
	37.5% { transform: translate(35.35%, 35.35) scale(0.625 , 0.625); }
	43.75% { transform: translate(19%, 46%) scale(0.5625 , 0.5625); }
	50% {   transform: translate(0, 50%) scale(0.5 , 0.5); }
	
	56.25% { transform: translate(-19%, 46%) scale(0.4375 , 0.4375); }
	62.5% { transform: translate(-35.35, 35.35%) scale(0.375 , 0.375); }
	68.75% { transform: translate(-46%, 19%) scale(0.3125 , 0.3125); }
	75% {   transform: translate(-50%, 0) scale(0.25 , 0.25); }
	81.25% { transform: translate(-46%, -19%) scale(0.1875 , 0.1875); }
	87.5% { transform: translate(-35.35%, -35.35%) scale(0.125 , 0.125); }
	93.75% { transform: translate(-19%, -46%) scale(0.0625 , 0.0625); }
	100% {  transform: translate(0, -50%) scale(0.0625 , 0.0625); }

	/*105% {    transform: translate(0, -50%-10%); scale(0.0625, 0.0625)}
	106.25% { transform: translate(19%-10, -46%-10) scale(0.09375, 0. 09375); }*/
	/*
	12.5% { transform: translate(35.35%, -35.35%) scale(0.875, 0.875); }
	18.25% { transform: translate(46%, -19%) scale(0.8125, 0.8125); } 
	25% {   transform: translate(50%, 0) scale(0.75, 0.75); }
	31.25% { transform: translate(46%, 19%) scale(0.6875, 0.6875); }
	37.5% { transform: translate(35.35%, 35.35) scale(0.625 , 0.625); }
	43.75% { transform: translate(19%, 46%) scale(0.5625 , 0.5625); }
	50% {   transform: translate(0, 50%) scale(0.5 , 0.5); }*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Split animation

This animation effects splits an HTML element with a simple CSS clip-path graphic. You can easily replace the clip-path with a custom path, see our Split bullet effect for example. We also use the CSS filter function filter#brightness to simulate a flash of light and transform#rotate to rotate the HTML element slightly on impact.

<style>
.split {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: split;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes split {
	0% {  }
	1% { transform: scale(1.2,1.2) rotate(5deg); }
	2% { transform: scale(1,1) rotate(0deg); filter:brightness(10000%); 
		/* Simple CSS spark graphic - replace with your own if you like. */
		 clip-path: polygon(50% 0%, 30% 34%, 46% 53%, 45% 99%, 0% 100%, 0% 0%, 99% 0%, 100% 99%, 48% 100%, 60% 55%, 44% 35%, 66% 0%); }
	2.1% { filter:brightness(100%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Split Bullet animation

Similarly to the split CSS animation effect we create a very crude bullet impact animation. Insert a custom CSS clip-path#polygon to achieve different results.

<style>
.split-bullet {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: split-bullet;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes split-bullet {
	0% {  }
	1% { transform: scale(1.2,1.2) rotate(5deg); filter:brightness(100%);}
	2% { transform: scale(1,1) rotate(0deg); filter:brightness(10000%); 
		/* Simple CSS Bullet hole graphic - replace with your own if you like. */
		clip-path: polygon(53% 25%, 53% 32%, 25% 48%, 33% 57%, 21% 62%, 12% 80%, 27% 70%, 39% 66%, 40% 82%, 51% 90%, 48% 79%, 51% 64%, 61% 61%, 71% 78%, 80% 77%, 87% 82%, 76% 73%, 67% 67%, 67% 52%, 77% 46%, 89% 32%, 80% 36%, 68% 43%, 60% 50%, 51% 44%, 63% 26%, 50% 28%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
	}
	3% { filter: brightness(100%); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Squish animation

Squish a HTML element using the transform#scale CSS property. Alternatively you can easily adapt this to get the stretch animation effect.

<style>
.squish {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: squish;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes squish {
	0% { transform: scale(1, 1); }
	25% { transform: scale(0.02, 1); }
	50% { transform: scale(1,1); }
	75% { transform: scale(1,0.2)  }
	100% { transform: scale(1,1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Stretch animation

Stretch a HTML element using the transform#scale CSS property. Alternatively you can easily adapt this to get the squish animation effect.

<style>
.stretch {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: stretch;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes stretch {
	0% { transform: scale(1, 1); }
	25% { transform: scale(2, 1); }
	50% { transform: scale(1,1); }
	75% { transform: scale(1,2)  }
	100% { transform: scale(1,1); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Stripes animation

The stripes animation decreases the opacity of the original HTML element in a striped pattern. Here we apply the CSS mask-image and mask-position properties. The stripes are made using the mask#linear-gradient value.

<style>
.stripes {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: stripes;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes stripes {
	0% { mask-image: linear-gradient(0deg,
		transparent 0%,
		transparent 10%,
		#FFF 15%, 
		transparent 20%,
		transparent 30%,
		#FFF 35%, 
		transparent 40%,
		transparent 50%,
		#FFF 50%, 
		transparent 55%,
		transparent 65%,
		#FFF 70%, 
		transparent 75%,
		transparent 85%,
		#FFF 90%, 
		transparent 95%,
		transparent 100%
		); 
		mask-position: 0px 0px;
	}
	50% { mask-position: 0px -50px; }
	/*75% { mask-position: 0; }
	100% { mask-position: 0px 50px; }*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Have a great day and enjoy our site! :)

Animania project Cost statistics

Server: We run on a 6$/month VPS.
Domain: 3$/month.

Tech we use:
Old Lenovo from 2017

Tech we'd love to have.
Apple Mac Book Pro (2021) amzn.to/3zdNJPW
LG 43" amzn.to/3gy62sz
Roccat Burst Pro Air amzn.to/3W5eb8o

We earn a small commission if you buy anything from Amazon following the links above.

How did we do it?
Written in Svelte with SvelteKit find out more on our About page.

Share our project on twitter, reddit, HN
or any other social network you love!

CSS Stripes Vertical animation

<style>
.stripes-vertical{
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: stripes-vertical;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes stripes-vertical {
	0% { mask-image: linear-gradient(90deg,
		transparent 0%,
		transparent 10%,
		#FFF 15%, 
		transparent 20%,
		transparent 30%,
		#FFF 35%, 
		transparent 40%,
		transparent 50%,
		#FFF 50%, 
		transparent 55%,
		transparent 65%,
		#FFF 70%, 
		transparent 75%,
		transparent 85%,
		#FFF 90%, 
		transparent 95%,
		transparent 100%
		); 
		mask-position: 0px 0px;
	}
	50% { mask-position: -50px 0px; }
	/*75% { mask-position: 0; }
	100% { mask-position: 50px 0px; }*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Stripes Diagonal animation

The diagonal stripes animation decreases the opacity of the original HTML element in a striped pattern. Here we apply the CSS mask-image and mask-position properties. The stripes are made using the mask#linear-gradient value.

<style>
.stripes-diagonal{
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: stripes-diagonal;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
	
@keyframes stripes-diagonal {
	0% { mask-image: linear-gradient(45deg,
		transparent 0%,
		transparent 10%,
		#FFF 15%, 
		transparent 20%,
		transparent 30%,
		#FFF 35%, 
		transparent 40%,
		transparent 50%,
		#FFF 50%, 
		transparent 55%,
		transparent 65%,
		#FFF 70%, 
		transparent 75%,
		transparent 85%,
		#FFF 90%, 
		transparent 95%,
		transparent 100%
		); 
		mask-position: 0px 0px;
	}
	50% { mask-position: -50px 0px; }
	/*75% { mask-position: 0; }
	100% { mask-position: 50px 0px; }*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Stripes Diagonal Left Top to Bottom Right animation

<style>
.stripes-diagonal-left-top-to-bottom-right {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: stripes-diagonal-lt2br;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes stripes-diagonal-lt2br {
	0% { mask-image: linear-gradient(-45deg,
		transparent 0%,
		transparent 10%,
		#FFF 15%, 
		transparent 20%,
		transparent 30%,
		#FFF 35%, 
		transparent 40%,
		transparent 50%,
		#FFF 50%, 
		transparent 55%,
		transparent 65%,
		#FFF 70%, 
		transparent 75%,
		transparent 85%,
		#FFF 90%, 
		transparent 95%,
		transparent 100%
		); 
		mask-position: 0px 0px;
	}
	50% { mask-position: 0px 50px; }
	/*75% { mask-position: 0; }
	100% { mask-position: 0px -50px; }*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Teeter animation

Let a HTML element teeter by using the CSS property transform#scale.and transform#translate .

<style>
.teeter {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: teeter;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
		
@keyframes teeter {
	/* 0% { } */
	33% { transform: translate(-7%, 0) rotate(-9deg); }
	66% { transform: translate(-5%, 0) rotate(4deg); }
	66% { transform: translate(7%, 0) rotate(9deg); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Transparency animation

Make a HTML element transparent by changing the CSS propery opacity or alternatively use filter#opacity . You can customize the code by changing the

<style>
.transparency {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: transparency;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
			
@keyframes transparency {
	0% { opacity: 1; }
	50% { opacity: 0;}

	/* Alternative */
	/*
	0% {filter: opacity(1); }
	50% {filter: opacity(0); }
	*/
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Wheels animation

Wheels animation effect spins a HTML element like a starting tire of a car.

<style>
.wheels {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: wheels;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;				
}
			
@keyframes wheels {
	0% { transform: rotate(0deg); }
	20% { transform: rotate(360deg); }
	40% { transform: rotate(1800deg); }
	80% { transform: rotate(36000deg); }
	99.9% { transform: rotate(43200deg); }
	100% { transform: rotate(0deg); }
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

Animation & Effects Reference for Pure CSS and more!

CSS Appear Disappear animation

CSS Ascend animation

CSS Blast Color animation

CSS Blinds animation

CSS Blinds Left to Right animation

CSS Blink animation

CSS Blink with pause animation

Animania project Cost statistics

CSS Boomerang animation

CSS Bounce animation

CSS Box Appear and Disappear animation

CSS Center Revolve animation

CSS Compress X animation

CSS Compress Y animation

CSS Crawl animation

Animania project Cost statistics

CSS Credits animation

CSS Curve Up animation

CSS Curve Down animation

CSS Curve Erratic animation

CSS Darken animation

CSS De-Saturate animation

CSS Descend animation

Animania project Cost statistics

CSS Different color animation

CSS Float animation

CSS Grow Shrink animation

CSS Grow Step-wise animation

CSS Helix in Z Direction animation

CSS Light Speed animation

CSS Light Speed Z animation

Animania project Cost statistics

CSS Pinball animation

CSS Sling animation

CSS Snake animation

CSS Spin animation

CSS Spin Horizontal animation

CSS Spinner animation

CSS Spinner Diamond animation

Animania project Cost statistics

CSS Spinner Erratic animation

CSS Spiral animation

CSS Split animation

CSS Split Bullet animation

CSS Squish animation

CSS Stretch animation

CSS Stripes animation

Animania project Cost statistics

CSS Stripes Vertical animation

CSS Stripes Diagonal animation

CSS Stripes Diagonal Left Top to Bottom Right animation

CSS Teeter animation

CSS Transparency animation

CSS Wheels animation

Welcome to animania.info CSS animation & effects reference