css-shredder.css

.shredded-paper.animate { animation: shredShake 0.12s 26 0.3s; }
.shredded-paper.animate > div[class^='item-']:nth-of-type(2n) { animation: Animation1 3.6s 1 forwards 1s, shredGo 3.6s 1 forwards; }
.shredded-paper.animate > div[class^='item-']:nth-of-type(2n-1) { animation: Animation2 3.6s 1 forwards 1s, shredGo 3.6s 1 forwards; }
.shredded-paper.animate .content { animation: cover 3.6s 1 forwards; }

@keyframes shredGo {
	10% { top: 20px; }
	12% { top: 15px; }
	30% { top: 150px; }
	32% { top: 145px; }
	60% { top: 320px; }
	62% { top: 315px; }
	68% { top: 380px; }
	100% { top: 400px; }
}

/* Shake the shredder */
@keyframes shredShake {
	50% { top: 0; } 
	100% { top: 4px; }
}

@keyframes cover {
	10% { height: calc(100% - 20px); top: 20px }
	12% { height: calc(100% - 15px); top: 15px; }
	30% { height: calc(100% - 150px); top: 130px; }
	32% { height: calc(100% - 145px); top: 125px; }
	60% { height: calc(100% - 260px); top: 250px; }
	100% { height: calc(100% - 260px); top: 250px; }
}

/* Rotate one way */
@keyframes Animation1 {
	20% { transform: scaleY(1.1) rotateX(5deg); }
	50% { transform: scaleY(1.1) rotateX(-5deg); top: 0; }
	90% { transform: scaleY(1.1) rotateX(10deg); top: 400px; }
	100% { transform: scaleY(1.1) rotateX(10deg); top: 1200px; }
}

/* Rotate the other */
@keyframes Animation2 {
	20% { transform: scaleY(1.1) rotateX(-5deg); }
	50% { transform: scaleY(1.1) rotateX(-5deg); top: 0; }
	90% { transform: scaleY(1.1) rotateX(-10deg); top: 400px; }
	100% { transform: scaleY(1.1) rotateX(-10deg); top: 1200px; }
}