Subtle Animations with CSS & Javascript: Part 2

Beginning CSS3 animation

CSS3 gives us two primary ways of animating HTML elements:

1. “transition” and “transform” manipulate elements from one state to another
2. “CSS animations” can control a complex series of movements during an animation

1) CSS Transitions are used for creating a smooth transition from one state to another. Transitions specify the duration of an element. Without a transition, the change would be abrupt and take effect immediately. By using transitions with transforms, you can produce a smooth, gradual animation. We most often see transitions used on HOVER states. Transitions can be applied a wide variety of CSS properties such as opacity, border, height, width and font-size.

We have 5 properties that allow us to control CSS transition animations:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• transition

(Remember: properties are a part of a CSS rule.)

Example A:

The transition property is the SHORTHAND version of the above four properties in example A.

There are two properties that are required in order for the transition to take effect:

1. transition-property

2. transition-duration

Transition Example:

You don’t have to know all the details. Just recognizing the shorthand code will be enough for you to be able to manipulate a CSS3 rule that you are copying and pasting into your own style sheet.

2) The transform property allows you to skew, rotate, translate or scale an element. Transforms are triggered when an element changes states, such as on mouse-hover or mouse-click.

CSS transform has 6 main properties:

• scale
• translate
• rotate
• skew
• perspective
• matrix

• scale(): affects the size of an element.
• translate(): moves an element sideways or up and down.
• rotate(): rotates an element clockwise.

The transform SHORTHAND allows you to string the various transform methods into one property.

Example of Transition and Transform on an Element:

.scaleThis {
  transform: scale(1, 1);
  transition: transform 0.5s ease;
}
.box:hover .scaleThis {
  transform: scale(1.5, 1.5);
}

3) CSS Animations – CSS animations can control a COMPLEX series of movements. They are animations you create with the @keyframes and animation properties.

So there are basically two parts to these animations:

1. Keyframes – define the stages and styles of the animation.
2. Animation Properties – define how it is animated.

@keyframes is the CSS rule where the animation is created.

The @keyframes CSS at-rule controls the INTERMEDIATE STEPS in a CSS animation sequence. You can specify when the change will happen in percentages, or with the keywords “from” and “to” (which is the same as 0% and 100%).

0% is the beginning. 100% is the end. You can also add in between percentages, such as 60%.

We need to define our @keyframes rule somewhere in our CSS style sheet. Let’s give the set a name of ‘bounceIn’. You can use any descriptive name that helps you remember it.

@keyframes Example with Transform:

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

Notice all the curly braces in the example. They are nested in pairs { }.

To make the animation work, you need to bind the @keyframes to a selector. @keyframes alone won’t do anything.

Animation Properties

The animation property is used to call @keyframes inside a CSS selector. The animation (applied to an element) can be controlled with different animation properties. You can decide such things as how many times the animation plays. You can also delay its start time.

There are 9 properties you can use that allow you to control the CSS animation:

• animation-name
• animation-duration
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation-delay
• animation-play-state
• animation

CSS Example:

.box {
animation-name: bounceIn;
animation-duration: 4s;
}

We can shorten it with a SHORTHAND property.

The animation CSS property is a shorthand property for the various animation properties: animation-name, animation-duration,  animation-delay, animation-direction, animation-fill-mode, and animation-play-state.

Shorthand Example:

.box {
animation: bounceIn 4s;
}

(Space-separate all the individual values you want to add. The order doesn’t matter except when using both duration and delay. They need to be in that order. Note: Always specify the duration, otherwise the duration is 0 and it will never be played.)

REMINDER: value of the animation-name property must match an identifier in the @keyframes rule, otherwise no animation will occur.

The word we are matching here is “bounceIn”.

Associating The Animation with an HTML Element

Next Step

Next, we need to give an element in our HTML page a class of .box. (See the example below.) It will bounce in and last 4 seconds. We’ll give another div a class of .box2. It will bounce in twice and last 6 seconds after a 3 second delay. Here’s the code we need.

CSS Code:

.box {
 animation: bounceIn 4s;
}

.box2 {
animation: bounceIn 6s 3s 2;
}

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}

60% {
transform: scale(1.2);
opacity: 1;
}

100% {
transform: scale(1);
}
}

<div class="box redBox>...info in our web page...</div>
<div class="box2 blueBox>...info in our web page...</div>

In our DEMO, we also give the first box a class of .redBox and the second one a class of .blueBox. We’ve given them different colors, widths etc. in those separate classes.

NOTE: We have not included CSS vendor prefixes in the above example for brevity sake.

DEMO:

Red Box, Blue Box Bounce in
Bounce In Style Sheet 

If these examples seem complicated right now, don’t despair.

Many code libraries and tools are available online to add CSS animations quickly without having to write the code yourself. Animate.css provides several pre-made animations you can add to a web page. You can copy all the css code into your own style sheet, then link to the style sheet in the head section of your HTML document.

Here’s a snippet from the animate.css file that you can download and use:

NOTE: We have included a  CSS vendor prefix in this example.

.subtleFadeIn {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Notice the @keyframes rule. The @ rule and its identifier “fadeInRight” are followed by a number of rule sets (selectors with declaration blocks as in normal CSS code). The rule sets are surrounded by curly braces, which nest the rule sets inside the @ rule.

Follow the Steps

In your HTML document, you can give an element, such as a <div> a class of .subtleFadeIn, then put the example snippet (above) into a CSS style sheet and use the <link> tag in your HTML document to link to the style sheet. Then check your page out in a web browser to see the box fade in from the right side.

DEMO:

fadeInRight DEMO
fadeInRight Style Sheet

CSS3 Animations with Javascript (JS)

JavaScript (and jQuery) allow you to animate things that CSS can’t (such as the scroll position).

Say you want an “About Us” section of a page to gradually appear as a visitor scrolls down. A JavaScript component like ScrollReveal.js or Wow.js can be applied to specific containers (divs) on your page so only those elements animate.

Scroll-based Animations

We might want to fade elements in or provide an interesting transformation near the bottom of a long page. We want the animation to occur when the user can actually view them. If we relied on CSS only, the animation would’ve already taken place before the user reached that section of the page. So we need JavaScript.

• JavaScript  can be added to any web page using a <script> tag.
• The <script> tag can either contain JavaScript directly (internal) or link to an external file via the srcattribute (external).
• An external JavaScript file is a text file with a .js extension.
• You can attach multiple external JavaScript files to a single web page.

Adding JavaScript into an HTML Document

The <script> tag can be placed in the <head> section of your HTML, in the <body> section or after the </body> close tag. Scripts that are small can be put in an HTML file. Larger scripts or those that will be used across several pages, are generally placed in a js file that is referenced by the HTML document.

Example:

<script src="js/script.js"></script>

The <script> tag in this example is pointing to the script.js file in the js folder of our website.

It’s usually a good idea to put the <script> element near the bottom of the HTML file for better PAGE SPEED.

JavaScript Libraries

There are collections of JavaScript code called libraries, which provide useful scripts that you can use. These libraries often make it easy to do something that’ quite difficult. Copy and paste the code into your own JS file and add it to your website. Then use the <script> tag in your web page to link to it.

Want to add subtle animations that take place as a user scrolls down your web page? Try adding Javascript from Wow.js or  ScrollReveal.js along with CSS code from Animate.css.

Script Tag Example:

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

One set of script tags in this example links to an external javascript file (wow.min.js) that is in a “js” folder. (This script is minified to make it compact so it loads faster.)

The second set of script tags, in the example, surrounds code that initiates the external script.

IMPORTANT: An element in the web page must have a class of .wow to reference the “wow” js file and a class of .fadeInRight that references one of the styles in animate.css file. If you miss the .wow part, you’re animation will be triggered right away and not wait for you to scroll down the page.

<div class="wow fadeInRight">
Content to Fade In when User Scrolls down a Web Page
</div>

DEMO:

Fade In on Scroll DEMO Animation
Fade In on Scroll DEMO Style Sheet

SUMMARY: CSS3 and JavaScript can be used to create subtle animations for a web page. We will use a <link> tag in our HTML page to reference our CSS file and a <script> tag to reference our JavaScript file. We will use CSS rules in our style sheet and SHORTHAND properties to keep our CSS code concise. We will match our “selectors” in our style sheet with class names in our HTML elements. Then we will experiment with transition, transform, @keyframes and animation properties. We will pay attention to the number of animations and speed of them. By adding them sparingly and at speeds that won’t annoy our visitors, we can create subtle animations that will improve user experience.