CSS and jQuery animations

So a topic that comes up regularly with building front end websites is animations. How to take content and give it a bit of life, to keep users more engaged? So I will be going over some ways to do this, and common practices used both with CSS as well as with jQuery. You might ask, if CSS can accomplish this, why would we really use jQuery or JavaScript? The answer is a few things, for one, some developers are more comfortable in JavaScript, and also CSS is very limited in what it can do when it comes to user interactions, so this is why JavaScript and jQuery get used.

Animations in CSS

With CSS, animations can be done in two ways. Utilizing a transition, or actual animation key-frames. For now we will be looking at transitions, as they are easier to learn and use and are less complicated than key-frames. The CSS property transition can be written in a few ways, take the following as an example…

CSS global transition property

.transitions {
transition: all 1s ease;
}

// what about browsers which might require special extensions (this is less common these days, but might apply for some properties still)
// we can include special extensions to ensure this is handled appropriately like so...

.transitions {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

We are defining a CSS class named transition, and telling it to transition any animatable properties (all) over 1 second and using an ease transition. Personally I find it rare that I would need to animate a background over 1 second and then animate a color over a different period of time like 2 seconds. I usually keep my animations throughout my website over the same time span in 99% of cases, so for my purposes something along these lines tends to work well for me.

Ok, so that is great, now how do we get to use something like this? Well it is probably easier than you think, take this code for example…

Animate on hover with CSS

<style>
.transitions {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.box {
    width:100px;
    height:100px;
    background:blue;
    color:white;
}
.box:hover {
    background:red;
}
<style>

<div class="box transition">
A box.
</div>

Result:

As you can see, we indeed get a box with our specified height and width, and when you hover your mouse over it you will see it transition from blue to red over a period of one second. This is a very simple example. You can transition quite a long list of CSS properties colors, backgrounds, height (needs set height 123px), width (need set width 123px), opacity, etc. Which gives you the basics of creating simple css animations. Your animations do not need a trigger such as a hover event, they can simply animate on their own as well.

Further, if you are noticing that your animations might be a bit choppy. You might also consider using the CSS transform property, with a sub-property of translate3d (transform: translate3d();), as it will utilize the graphics card if possible to smooth out animations. Very simple animations usually do not require this, but it is a trick to keep up your sleeve if you run into troubles with the animations not performing well.

jQuery Animations

jQuery has numerous animations built into it, but the most commonly used ones are probably .fadeIn(), and .fadeOut(). These will allow you to show and hide content easily with a nice fade animation. The reason people use jQuery for something like this is because of the ability to tie it to an external trigger. With CSS we can do something when a user hovers over an element, but it is generally not possible to cause Element A to fade out when a user clicks on Element B. This is where jQuery and JavaScript come to the rescue.

Consider the following HTML code

Normal HTML code

<button class="aButton">Button</button>
<div class="box2">A Box!</div>

Which might look something like this…

In order to get it so something happens when a user clicks on the button, we can leverage jQuery and javascript to create a simple fadeIn or fadeOut animation. For this simple exercise we will simply make the box fadeOut and disappear entirely.

jQuery to alter HTML on user interaction

$('.aButton2').click(function() { // if we click on the HTML element with a class of "aButton2"
    $('.box3').fadeOut(1000); // find the HTML element with a class of "box3" and then make it fade out over 1000 milliseconds
} // close out our unnamed function

As you can see if you clicked on the button. Now our box will fade out and actually disappear completely. To see it again simply refresh the page. So this is the beginning of creating interactive content on your website, where you can show and hide things based on a user’s actions. There are numerous different jQuery functions for animations including the .animate() function. You can animate the same types of css properties, and even utilize your css transitions to simply change a property from one thing to another. Then let CSS handle the transition in between.

I will get more in depth with animations and interaction in another article but this goes over the basics of utilizing transitions in CSS and then using jQuery to create user interaction with content. This is enough to get started and learning how to put some interesting ideas together, while making your website a bit fancier looking!