I DONT UNDERSTAND ANIMATIONS OR TRANSITIONS!

Hey Ollie,

I'll do my best to try and explain what transitions are.

OK, first of all the transition property, whose syntax looks like this:

.whatever {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

is a shorthand property that represents up to four longhand properties relating to transitions. The four longhand properties are the values specified in the square brackets in the code above. Written out as longhand properties, they look like this:

.whatever {
    transition-property: border-radius;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

So these four properties allow an element to change its property values over a specified period of time. Let's look at each of them in depth.

First there's the transition-property property. This property specifies which other properties belonging to the element will be modified.

In this code, I'm going to modify the background color of a div element from blue to orange over the course of 1 second.

.div {
    background-color: blue;
    transition-property: background-color;
    transition-duration: 1s;
}

.div:hover {
    background-color: orange;
}

We can also use the shorthand I was talking about.

.div {
    background-color: blue;
    transition: background-color 1s;
}

.div:hover {
    background-color: orange;
}

The transition-duration property is pretty self-explanatory, I think. It just specifies how long it will take for the differences in property values to take effect.

The transition-timing-function property is probably the most complex of the four properties. It specifies how the transition will act over the course of the duration. There are 7 predefined keyword values that you can specify: ease, linear, ease-in, ease-out, ease-in-out, step-start, and step-end.

Now I don't really have the time or comment space to go into each of those in depth, but I suggest looking them up to get a good feel for what they each do. Or, the way I like to go at it: just start using them! You'll probably be able to get a decent grasp on the differences between each value, although I will say that some of the effects are less prominent than others.

Finally, there's transition-delay. This property specifies the amount of time it will take before the property will be affected.

In this code example, I'm going to modify the padding, background-color, and border-radius of a div, over the course of 3 seconds using the ease timing-function and a delay of 1 second.

.div {
    background-color: red;
    border-radius: 15px;
    padding: 10px;
    transition-property: background-color, border-radius, padding;
    transition-duration: 3s;
    transition-timing-function: ease;
    transition-delay: 1s;
}

.div:hover {
    background-color: blue;
    border-radius: 50px;
    padding: 25px;
}

Of course we can use the shorthand for all of these as well, and what's more, instead of having to specify each of the properties (background-color, border-radius, and padding), we can just say all.

.div {
    background-color: red;
    border-radius: 15px;
    padding: 10px;
    transition: all 3s ease 1s;
}

.div:hover {
    background-color: blue;
    border-radius: 50px;
    padding: 25px;
}

Also, there isn't full browser support for this yet, so it would probably be a good idea to supply a vendor prefix.

-webkit-transtion: 1s padding ease-in 1s;
-moz-transition: 1s padding ease-in 1s;
-o-transition: 1s padding ease-in 1s;
transition: 1s padding ease-in 1s;

I hope that helps even a little bit! Let me know if you have any other questions!