Animations
With CSS you can animate HTML elements without the need of Jquery, Javascript, Flash or other methods. Learning these can help bring your website to life!
We will go over the basics of CSS Animations and their properties:
keyframes ~ The start and stop point of the animation.animation-name ~ Linking HTML element to Keyframe.animation-duration ~ How long the animation takes.animation-timing-function ~ How the animation should speed up or slow down.animation-direction ~ The direction the animation should run.animation-delay ~ Delay before the animation runs after loading.animation-iteration-count ~ How many times should the animation run.animation-fill-mode ~ Specify whether the CSS is saved after the animation is complete.animation-play-state ~ Choose if the animation is running or paused.animation ~ Shorthand for animations.
If you want to animate your element there are plenty of different aspects that you can use including; color (text), background-color, width and height, opacity,
position (margins or via top/left/right/bottom), transform (rotation, scale, etc.) and nearly anything else that can be edited in a range of values.
Keyframes & Durations
Keyframes tell the site what styles the element will have at certain times. It is linked to animation-name.
There are two ways you can use keyframes;
with from and to or with a range of percentages from 0 - 100. Durations are how long the animation takes to complete.
These are put into the styling for your element rather than the keyframes. To specify the duration of the animation, use animation-duration.
This code below shows the two different types of keyframes. With percentages, you can choose any value from 0 to 100%. The #box1 and
#box2 are styling for the HTML div elements with unique ID's.
#box1 {
animation-name: animation_1;
animation-duration: 3s;
}
#box2 {
animation-name: animation_2;
animation-duration: 3s;
}
@keyframes animation_1 {
from {background-color: indigo; margin-left: 0;}
to {background-color: red; margin-left: 100px;}
}
@keyframes animation_2 {
0% {background-color: indigo; margin-left: 0;}
33% {background-color: orange;}
66% {background-color: blue;}
100% {background-color: red; margin-left: 100px;}
}
Speeds
Speeds are the animation speed curves or known as the timing function. Speed curves define how the animation should speed up and slow down throughout. The animation-timing-function
property specifies this.
There are six different types of timings:
linear ~ Same speed from start to end.ease ~ Short slow start then fast then a gradual slow end (default).ease-in ~ Slow start and constant speed afterwards.ease-out ~ Constant speed with a slow end.ease-in-out ~ Slow start with fast middle and a slow end.cubic-bezier(x, x, x, x) ~ Cubic bezier speed curve.
This code below shows the different timing functions of the boxes above. The cubic-bezier is not shown as it can be any custom-defined speed model.
#box1 {animation-timing-function: linear;}
#box2 {animation-timing-function: ease;}
#box3 {animation-timing-function: ease-in;}
#box4 {animation-timing-function: ease-out;}
#box5 {animation-timing-function: ease-in-out;}
Directions
The animations can be set to four different direction types. You can specify this in the code using animation-direction.
There are four different types of directions:
normal ~ Start to end (default).reverse ~ End to start.alternate ~ Start to end and backwards back to start.alternate-reverse ~ End to start then back to end.
This code below shows the different directions of the boxes above.
#box1 {animation-direction: normal;}
#box2 {animation-direction: reverse;}
#box3 {animation-direction: alternate;}
#box4 {animation-direction: alternate-reverse;}
Delays
Delays define how long it takes from the page load until the animation begins. This can be used if you want multiple animations happening after each other. To choose a delay you put animation-delay into the code.
You can also choose a negative delay! This means that the animation will start from the position it would be if it had been playing for the specified seconds. Because animation delays do not work on looped animations or multiple iterations, I have used a workaround by specifying keyframes. The above animation uses this but here is the code for both in case you want to make one time animations.
#hidden_box {
animation: animation_1;
animation-delay: 2s;
}
#demo_box {
animation: animation_2 8s ease-in-out infinite;
}
@keyframes animation_2 {
0% {background-color: black; margin-left: 0;}
40% {background-color: red;}
50% {background-color: green; margin-left: 0;}
100% {margin-left: 100px;}
}
Iterations
This is for how many times an animation should run. You would use this if you wanted an animation that a few times before stopping such as a sign blinking on and off twice before staying on. To specify how many times you want the animation to run you use animation-iteration-count.
For demonstration purposes, this animation loops after a while so that the user can see it runs three times before stopping. Like the section above, I use keyframes but since most people would either use iterations or an infinite loop, I won't include the code for it. This code is to make an animation run three times.
#box {
animation: animation_1 4s linear;
animation-iteration-count: 3;
}
@keyframes animation_1 {
0% {margin-left: 0;}
50% {margin-left: 100px;}
100% {margin-left: 0;}
}
Fill Modes
This specifies whether the CSS is saved in position after the animation has completed or if it should return to the original CSS. animation-fill-mode does not work on infinite animations. If you want the box that you have animated to 1.5x zoom to stay there once the animation is completed then you would set the fill-mode to 'forwards'. You can think of this as 'would you rather have the animation CSS or the default CSS used before or after the animation.'
There are four different types of fill modes:
none ~ The box will reset its default styling (default).forwards ~ The new style from the animation is saved once complete.backwards ~ The box will get the styles from the start of the animation keyframe.both ~ The box uses both the first and last keyframe for both start and end.
The fill modes are affected by the direction of the animation so make sure to check which way the direction is set.
This code below shows the different fill modes of the boxes above.
#box1 {animation-fill-mode: none;}
#box2 {animation-fill-mode: forwards;}
#box3 {animation-fill-mode: backwards;}
#box4 {animation-fill-mode: both;}
Play States
This allows you to pause or play the animation. It is hard to use but can be implemented with jQuery or using events such as :hover or :active and others. To use this, add animation-play-state to your code. This can be useful if you want an animation to pause when hovered over. Try moving your mouse over the box below.
In this demonstration, I use hover to pause the animation. This code below shows the two different play states of the box above.
#box {animation-play-state: running;}
#box:hover {
animation-play-state: paused;
opacity: 0.85;
}
Shorthands
Now that you know all you need to know, here is a shorthand to take up less code and space!
box {
animation-name: example;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
This code above can be shortened into one line by using the animation shorthand. The Keyframes code cannot be shortened so it is not shown here. You can leave out properties and the shorthand will work as long as the remaining ones are still in order. e.g. duration must always go before the delay. Magic.
box {
animation: example 4s ease-in-out 2s 3 alternate forwards;
}
*You're a wizard single-line, Harry!*
