For demonstration purposes, I've built a simple reminders app. The app uses HTML5's localStorage API to save the items to your browser's local storage. So, you can actually use it to take in-browser notes if you want, it's actually why I built it in the first place for my own notes. I'm not going to get into details of how to build this app because it's not the purpose of this tutotial.
The markup for the app is just a simple form with a text field and submit button, and an empty unordered list. The items will be added to the list dynamically. There's also a couple of divs for the notifications which appear after saving or removing an item, and a counter and a button to delete all items at once. So here's all the markup needed:
You can add, edit, remove items, and restore them, and it's actually the removing and restoring where the animations come in place the most. Adding the items is pretty simple, and not much of an animation happens there, except a fading in and falling down animation which we'll get into as we start with the CSS, so let's do that.
.new-item. Items removed get a
.removed-item class, and restored items get a
.restored-item class. Each of these classes fires its own animation. The class names are going to be the same for all demos, and it's the animation
@keyframes that will be different for each one.
Let's start with the first demo.
Newly added items are going to "fall down" from above. This is a very simple but nice effect. Each item starts at a position -400px above their final position, and fall down from that position. Don't forget that the
animation-fill-mode should have a value of
forwards to make sure the items stays in their final position inside the list, otherwise it'll just disappear up again as soon as the animation is finished.