mirror of
https://github.com/cssanimation/css-animation-101.git
synced 2025-02-19 14:44:44 +01:00
101 lines
4.6 KiB
Markdown
101 lines
4.6 KiB
Markdown
# Animations in action
|
|
|
|
Now that we've looked at the `transition` property, let's take a deeper look at the `animation` property.
|
|
|
|

|
|
|
|
## A symbiotic relationship
|
|
|
|
The `animation` property is applied to an element just like a `transition`. It also needs a second part, called `keyframes`.
|
|
|
|
.element {
|
|
animation: ...
|
|
}
|
|
|
|
@keyframes animation-name {
|
|
/* Keyframes go here */
|
|
}
|
|
|
|
One benefit of having the `keyframes` defined separately is that it allows us to create animations that can be reused multiple times.
|
|
|
|
## The `animation` property
|
|
|
|
Applying these keyframes to an element is done with the `animation` property. It is quite similar to `transition` but with some extra properties. An `animation` could be written as the following shorthand:
|
|
|
|
animation: change-background 4s linear infinite;
|
|
|
|
Written as individual properties it would look like:
|
|
|
|
animation-name: change-background;
|
|
animation-duration: 4s;
|
|
animation-timing-function: linear;
|
|
animation-repeat: infinite;
|
|
|
|
Where a `transition` takes a `property`, such as "background" or "all", the `animation` property is given the name of the set of `keyframes` that describe the animation sequence.
|
|
|
|
Animations have some properties that transitions don't. For example, we can tell the animation to alternate back and forth rather than looping from the beginning each time.
|
|
|
|
## Keyframes
|
|
|
|
A set of `keyframes` in CSS is a series of stops along the way through an animation. Each "keyframe" is a written as a percentage.
|
|
|
|
I find it helps to describe this using an example. Let's start with a `div` on a web page that changes background over time. It begins with a blue background, changes to an orange background and then finally green.
|
|
|
|

|
|
|
|
If we tried to explain to someone how these background colours changed over time, we might say something like:
|
|
|
|
_"Start with a blue background, then orange background halfway through and finish with a green background"_
|
|
|
|
Or, if we wanted to be more precise, we could use percentages to explain the timing:
|
|
|
|
_"Start at 0% of the way through with a blue background, then by 50% through be orange, and at 100% have a green background"_
|
|
|
|
We could then summarise this as:
|
|
|
|
0% Blue
|
|
50% Green
|
|
100% Orange
|
|
|
|
With these percentages we've created a series of "waypoints" that an animation might pass through. All we need to do now is tell the browser that these percentages are in fact `keyframes` and give the animation a name. The result is this:
|
|
|
|
@keyframes change-background {
|
|
0% {
|
|
background: blue;
|
|
}
|
|
50% {
|
|
background: orange;
|
|
}
|
|
100% {
|
|
background: green;
|
|
}
|
|
}
|
|
|
|
The animation is called "change-background". We'll use that later when applying the keyframes to an element.
|
|
|
|
As you read the code from the top down, the percentages are describing how far through the animation each of these keyframes takes place. We can see it in action here:
|
|
|
|

|
|
|
|
As the animation takes place, the browser creates the in-between frames needed to go from each of the background colours to the next. By telling the browser that we wanted the div to begin one colour, be another one half way through and finish on a third, the browser can do the work of creating the animation between each of these points.
|
|
|
|
I've put together [a CodePen example](http://codepen.io/donovanh/pen/WbqNwd?editors=110) showing this in action.
|
|
|
|
Earlier, I mentioned using the `animation-direction` property to have an animation alternate. Here's how it would look:
|
|
|
|

|
|
|
|
In this case I've changed the animation-direction property to `alternate`. See it [on CodePen here](http://codepen.io/donovanh/pen/NPZqej).
|
|
|
|
## Prefixes
|
|
|
|
For the moment it's still necessary to use the `-webkit-` prefix on the `animation` property. I won't add it to examples, but it will be needed for your animations to work in browsers such as Safari.
|
|
|
|
In CodePen you can use the "Autoprefixer" option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. [Prefix Free](http://leaverou.github.io/prefixfree/) is a decent alternative also.
|
|
|
|
## Homework
|
|
|
|
Open up [this keyframes example](http://codepen.io/donovanh/pen/WbqNwd?editors=110) and try changing the code. See if you can break it, and fix it. Even better, if you come up with something cool, let me know!
|
|
|
|
I love seeing how you're getting on. You can [email me](mailto:donovan@cssanimation.rocks) or get in touch [on Twitter](https://twitter.com/donovanh).
|