CSS

How to do Deletion Animations with CSS

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.

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

• Putting Javascript in Your CSS with Paint Worklets
• Making 3D CSS Flippable Cards
• Parent Selection in CSS: how the CSS has selector works
• How to vertically center text and HTML elements with CSS
• CSS Fonts
• The Quick Guide to Dark Mode
• Sticky Positioning with CSS
• A Guide to CSS Selectors
• Set a div or block to its content's width in CSS
• Updating CSS Variables with Javascript