Experiment

Now it’s time to experiment with everything we’ve just learned about animating user interfaces. Let's focus on adding and removing .reminder-item {} elements for this task.

Use the .show {} and .hide {} classes to trigger animations on the reminder items as they enter and leave the page.

Toggle reminders

.add-reminder {}
/** Toggles .show and .hide classes on: **/
.reminder-item {}

Here's a basic example of what you can do, to get you started:

/** Article animations **/
.reminder-item {
  transition: transform 1s, opacity 1s;
  transform: scale(0);
}

.reminder-item.show {
  transform: scale(1);
}

.reminder-item.hide {
  opacity: 0
}

That's a simple transition that loads in a new .reminder-item {}. Now, try using keyframes and animations to animate the .reminder-item {} elements using the .show {} and .hide {} classes. Feel free to add colours, styles, and whatever else takes your fancy. Go nuts!