CSS Animation

What is CSS animation?

CSS animation is a great tool when you want to change your CSS code over a set amount of time but don’t want to use Java script. CSS animation is great when you would like to move your elements and change your sites styles. CSS Animation is light weight and moves elements in a simple and easy manner. You can change any CSS code you would like with the use of CSS animation.

<style><!-- [et_pb_line_break_holder] -->@keyframes movement{<!-- [et_pb_line_break_holder] -->0%{left: 0%;top: 0%; background-color: red;}<!-- [et_pb_line_break_holder] -->25%{<!-- [et_pb_line_break_holder] -->left: 100%; top: 0%; background-color: yellow; transform: rotate(90deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->50%{<!-- [et_pb_line_break_holder] -->left: 100%; top: 100%; background-color: green; transform: rotate(180deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->75%{<!-- [et_pb_line_break_holder] -->left: 0%; top: 100%; background-color: blue; transform: rotate(270deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->100%{<!-- [et_pb_line_break_holder] -->left: 0%; top: 0%; background-color: red;transform: rotate(360deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#block{<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->background-color: red;<!-- [et_pb_line_break_holder] -->animation-name: movement;<!-- [et_pb_line_break_holder] -->animation-duration: 4s;<!-- [et_pb_line_break_holder] -->animation-timing-function: linear;<!-- [et_pb_line_break_holder] -->animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Key Frames

Key frames are the back bone of CSS animation and what make them work. the “Key Frames” are the “what” you would like to do to the element. If I use the Animation at the beginning of this post as an example, you can see there are 4 major transition points happening on to the element. It moves to the right, then down, to the left, and back up. So for each of those points we need to have a Key frame. The syntax for key frames is expressed in percent values. Using the code for the original animation above this, you can see that each frame is expressed in a value of percentages. Its essentially segmenting the full animation into smaller parts to have more transitions.

Defining Animation parameters

We have the animation key frame code, but now we need to define how it should run, and what modules we should apply the animation to. We do this by referencing the element, and then using some additional CSS to define things like how long the animation should take to complete, how many times the animation should play, if the animation should be delayed, etc. If we continue to use the animation above as an example, the code looks like: 

Naming the Animated Element

So we can easily reference the element we are manipulating, we need to name it. We name elements in wordpress by navigating to the advanced tab in the module settings, and putting a name into the CSS ID text box. I named the original element block. We reference the block element by starting the code with #block{

Other Methods

If you don’t want everything nice and neat inside the code module, there is another way to implement the code. Once you have the “@Keyframes” code block on your site, it can be referenced in any other module. To do this All you need to do is navigate to the advanced tab, and instead of referencing the module in the code block, just put the code inside the module.  To show this, the animation I used in the header of this blog post lives in the last animation example called “backgroundchanger”. 

Width and Height

This is just to give me a decent size element to manipulate. If you are planning on applying this code to an image, text box, or anything that has a set width and height already, then you will not need to add these lines and we can skip past this.

<style><!-- [et_pb_line_break_holder] -->@Keyframes WidthandHeight{<!-- [et_pb_line_break_holder] -->0%<!-- [et_pb_line_break_holder] -->{width: 100px; height: 100px;}<!-- [et_pb_line_break_holder] -->25%<!-- [et_pb_line_break_holder] -->{width: 200px; height: 100px;}<!-- [et_pb_line_break_holder] -->50%<!-- [et_pb_line_break_holder] -->{width: 100px; height: 100px;}<!-- [et_pb_line_break_holder] -->75%<!-- [et_pb_line_break_holder] -->{width: 100px; height: 200px;}<!-- [et_pb_line_break_holder] -->100%<!-- [et_pb_line_break_holder] -->{width: 100px; height: 100px;}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#WHBlock{<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->background-color: red;<!-- [et_pb_line_break_holder] -->animation-name: WidthandHeight;<!-- [et_pb_line_break_holder] -->animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] -->animation-duration: 5s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Position

Defining the position is essential if your element will be moving. By default most elements have their position set to “fixed” which means it will not move from its original position. By setting the position to “relative” we are saying that any changes we make will be made in reference to its original position. 

<style><!-- [et_pb_line_break_holder] -->@keyframes position{<!-- [et_pb_line_break_holder] -->0%{left: 0%; top: 0%}<!-- [et_pb_line_break_holder] -->25%{left: 100%; top: 0%;}<!-- [et_pb_line_break_holder] -->50%{left: 100%; top: 100%}<!-- [et_pb_line_break_holder] -->75%{left: 0%; top: 100%;}<!-- [et_pb_line_break_holder] -->100%{left: 0%; top: 0%;}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#PBlock{<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->background-color: red;<!-- [et_pb_line_break_holder] -->animation-name: position;<!-- [et_pb_line_break_holder] -->animation-duration: 4s;<!-- [et_pb_line_break_holder] -->animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] -->animation-timing-function: linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Background-Color

This just sets the background color of the element. Ignore this if you are using an element that doesn’t have already have a set color. If you are using an element that doesn’t have a set color, you can set this color to what ever you would like. This is being changed in the animation code, so this is more of a place holder than anything.

<style><!-- [et_pb_line_break_holder] -->@keyframes backgroundchanger{<!-- [et_pb_line_break_holder] -->0%{background-color: red;}<!-- [et_pb_line_break_holder] -->25%{background-color: yellow;}<!-- [et_pb_line_break_holder] -->50%{background-color: green;}<!-- [et_pb_line_break_holder] -->75%{background-color: blue}<!-- [et_pb_line_break_holder] -->100%{background-color: red;}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#BGBlock{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->animation-name: backgroundchanger;<!-- [et_pb_line_break_holder] -->animation-duration: 4s;<!-- [et_pb_line_break_holder] -->animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] -->animation-timing-function: linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Animation-name

This is the most important part of the animation code. Without it there is no animation.  Here you are saying what animation you would like to apply to the element. This is in reference to the Keyframe code in the line “@keyframes Animation-name“. If we are looking at my original code, it would be “movement”.

Animation-duration

This is just how long you would like the animation to last from start to finish.

Animation-Timing-Function

By Default the animation will start slow, speed up, and then end slowly. If we want an animation that has the same speed from start to finish, we can set this to "Linear"

.

Animation-iteration-count

This is the amount of time we would like for the animation to run. This is set to 1 by default, but if you want it to run any amount more then you can change it to what ever you would like. I have mine set to inifinte so it will run until you leave the page. 

.