How to do Deletion Animations with CSS
📣 Sponsor
In this quick tutorial we're going to be looking at a bunch of different 'delete' styles to use on your next project. So let's take a look at some cool ways to delete things in your next project. Below are a set of delete animations which all work on similar principles. Let's take a look at them and then we'll jump into how they work. To start the animation, simply click the cross button in each card below.
Delete animations for UI Elements
Click the cross button on each card to delete it, and watch the animation.
Zoom Delete
Click the cross above to delete this item..
The Shredder
Click the cross above to delete this item..
Analogue TV
Click the cross above to delete this item..
Fall
Click the cross above to delete this item..
How to make UI animated deletion effects
So although all the animations above are based off CSS principles, we need a little bit of Javascript to kick start them. The key Javascript function we need is an event for whenever the user clicks the cross button. First off, let's make our card in HTML. Notice that we give the delete button an attribute called data-delete
. This is how we track the type of animation to run.
<div class="item">
<div class="image"></div>
<div class="delete" data-delete="zoom"><i class="far fa-times"></i></div>
<div class="text">
<h2>Zoom Delete</h2>
<p>Click the cross above to delete this item..</p>
</div>
<div class="animation-assets"></div>
</div>
Next, let's make our Javascript function to give animation to our cards. Although this looks a little bit more complicated, all this function does is adds the text from data-delete
in our HTML to the class of the .item
div. If the animation is the shredder, we have to do a little bit more too:
- First, we add 10 or so new divs to the
.animation-assets
div. We clip each of these so they look like shredded pieces of paper. - We then delay the animation a little for each, to give variety to each slice - and we alternate between two animations in our CSS - so we give different slices different animation names.
document.querySelectorAll('.delete').forEach(function(item) {
item.addEventListener('click', function(e) {
// First we get the
let newClass = this.getAttribute('data-delete');
let getParent = parent(this, '.item', 1);
if(newClass === 'shredder') {
getParent.classList.add('shredding');
// Shredder animation
// Slices
let shredAmount = 10;
let width = document.querySelector('.item.shred').getBoundingClientRect().width / shredAmount;
let animationName = 'spinALittle';
let animationDelay = 0;
for(let x = 0; x <= shredAmount; ++x) {
animationDelay += 1;
if(x % 2 === 0) {
animationName = 'spinALittleAlt';
} else {
animationName = 'spinALittle';
}
if(x % 3 === 0) {
animationDelay = 0;
}
let newEl = document.createElement('div');
newEl.classList.add('item-wrap');
newEl.innerHTML = `<div class="item">${getParent.innerHTML}</div>`;
newEl.querySelector('.animation-assets').innerHTML = '';
let clip = `clip-path: inset(0px ${(shredAmount - x - 1) * width}px 0 ${(x * width)}px); animation-delay: 0.${animationDelay}s; transform-origin: ${x*width}px 125px; animation-name: ${animationName};`
newEl.children[0].setAttribute('style', clip);
getParent.querySelector('.animation-assets').append(newEl);
}
} else {
getParent.classList.add(newClass);
}
});
});
CSS for delete animations
Next up, let's look at our CSS. To create the animations, we use keyframes. First up, we add animations to each of our .item
divs, based on the type of animation we want to show.
.item.zoom {
animation: zoom forwards 0.7s ease-out 1;
}
<p>.item.shredding {
animation: reduceWidth forwards 1.7s ease-out 1;
}</p>
<p>.item.fall {
animation: fallAway forwards 1s ease-out 1;
}
.item.analogue {
animation: analogue forwards 1s ease-out 1;
}
.animation-assets > .item-wrap > .item {
animation: spinALittle 1.4s ease-out 1 forwards;
perspective: 1000px;
position: absolute;
top: 0;
left: 0;
}
.item-wrap {
animation: dropShadow 0.1s ease-out forwards 1;
}
</p>
Then we make our animations. These do just a few things:
- First, they do the main animation, which is usually some kind of transform
- Then they reduce the padding, width, and margin to zero. This means items are removed smoothly from the card order.
- Finally, we usually reduce opacity to 0 so the items are no longer visible.
An example of the animation we use for the shredder is shown below:
@keyframes fallAway {
0% {
transform: rotateZ(0deg);
top: 0;
opacity: 1;
}
25% {
transform: rotateZ(-15deg);
}
100% {
top: 300px;
transform: rotateZ(-5deg);
opacity: 0;
}
}
<p></p>
If you want to view the full code, you can do so via the codepen linked here. These delete animation styles were pretty fun to do - and there's lots more you could do with them. If you come up with any cool ones, let me know on twitter!
More Tips and Tricks for CSS
- CSS Individual Transform Properties
- CSS Fonts
- An Interactive Guide to CSS Flex Box
- Parent Selection in CSS: how the CSS has selector works
- iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters
- CSS Transformations
- CSS Transitions
- Smooth CSS Gradient Transitions
- How to vertically center text and HTML elements with CSS
- Putting Javascript in Your CSS with Paint Worklets