CSS Animations can make your websites look more expensive. To make best use of your time suggest you focus on two objectives: 

1. Understand how to create animations
2. Learn how to use them effectively in your site

Creating Animations

This animation is a simple example of the things we can do. To create this we need two things: HTML and CSS. We use HTML to design the layout in terms of layers, and then the CSS to describe the movement within it. 

Here is the HTML we use: 

And the CSS we use:

Lets break down what we have here. The HTML is simple, it just gives us the structure. Each div used has a class, which is reflected in the CSS. The CSS is where the bulk of the action is happening. This is where the animation is done and the visual properties are defined.

We suggest folks who are new to web dev and may be using more basic platforms like WordPress or MODX try this in Visual Studio Code.  Editing these two documents in isolation via an IDE is a good way to experiment. 

HTML

The HTML serves to define the structure at a high level. Because the div with the class "circle" is inside the "square" div, it will be contained. 

We also have our stylesheet link in the HTML so it is present. 

CSS

The CSS here has a few things going on. First we have the style definitions. We are styling the classes "square" and "circle" using selectors. We set the sizes and colors for the two classes here as well as the animation  for circle. 

For a more detailed reference of the nuances of animation see here. 

For circle we specify the slide keyframes should be used with a 2s duration and loop infinitely. Now we simply need to understand the key frames. What do these do?

The keyframes control how the object changes over the course of the animation. Each percentage given describes a point in time. In our example, since we are using this animation with a 2 second duration, 0% refers to the beginning of the loop; 25% corresponds to 0.5 seconds in and so forth. 

We split our time up into 4 pieces here, because we will have 4 positions. Notice we have a 0% time, this is important for the animation because it tells it what to do at the start. At 25% we specify different properties. These properties dictate that the left margin should be 128px. This slides the ball to the right. 

When the animation progresses from 0% to 25%, the margin-left property will linearly change from 0px  to 128px; So for instance at 12.5% it would be 64px. This is called interpolation and it is what keeps it from just jumping instantly to the new position. 

Next we see for 50% there is a margin-top change, this does the same thing as the left, except it makes it move down instead of right.

When to use Animations

Ok, so animations are really fun; They certainly can make a site more dynamic and visually exciting. Why not use them for everything under the sun so the whole page is super modern and exciting? Well... That is what a lot of web designers do. It is the most accessible way of adding production quality to a site, but it can be overdone. Well used animation is discrete, it should be used with purpose. Attention is drawn to animations; Overusing them creates noise that distracts the user from what you are trying to convey. 

Animations can be tuned to different purposes. If a user just signed up for an event, you may have a dramatic full page animation congratulating them. The animation is bold and conveys to the user the task they were doing was completed. If you want to draw the users attention to their cart in the upper right corner of your page subtly when it has items in it, you would use a simple shimmering type of effect. Again this matches the level of importance we are placing on that element. Ask yourself "why am I drawing the users attention?" and "how strongly do I want to draw the users attention?". 

In general remember less is more in this context. Animations have their place but overusing them makes pages buggy across devices. It is also really lame, do not do that. LESS IS MORE