CSS animations

CSS animations are not only a powerful tool, but they are also easy to maintain with little knowledge needed in order to use them within a project.

Adding them to an interface can be an intuitive method of capturing a user's attention and they can also be used in pointing a user to a specific element with ease. The animations can be tailored and customized, making them ideal for plenty of use cases within a variety of projects.

Before we dig deep into Vue transitions and other animated possibilities, we should have an understanding of how to do basic CSS3 animations. Let's create a simple project that looks at this in more detail:

# Create a new Vue project
$ vue init webpack-simple vue-css-animations

# Navigate to directory
$ cd vue-css-animations

# Install dependencies
$ npm install

# Run application
$ npm run dev

Inside App.vue we can first create the following styles:

<style>
button {
 background-color: transparent;
 padding: 5px;
 border: 1px solid black;
}

h1 {...