HTML5 Animations Made Easy

with Animate.css
GETTING STARTED WITH ANIMATE.CSS

Jeff Batt
FOUNDER & TRAINER
@jeffbatt01 www.learningdojo.net
What is Animate.css?
Animate CSS
A cross-browser library of CSS animations. As easy to
use as an easy thing.
Exploring Animate CSS
What is a code library?
Code Library
Depending on the environment, code libraries may be
source code, in an intermediate language or in
executable form.
(https://www.pcmag.com/encyclopedia/term/57725/code-library)
3 Easy Steps for Animate CSS

Attach code any HTML file

Apply a class to an object within the HTML

Preview the animation

 Applying a Class

<p class="className">
Class Selectors
The class selector selects elements with a specific class
attribute.

To select elements with a specific class, write a period

(.) character, followed by the name of the class.
 Referencing a Class in CSS

.className{
property: value;
}
Demo

https://daneden.github.io/animate.css/
Entrance Animations
 Apply to objects entering
Entrance
Class usually contains “In”
Animations
Object will not be on stage right away
Exit Animations
 Apply to objects exiting
Exit
Class usually contains “Out”
Animations
Object will start on stage right away
Demo Project Starter
Demo Two Types of Projects
- Test project
- Final cooking website
Layouts built with Bootstrap 4
 Apply to objects entering
Entrance
Class usually contains “In”
Animations
Object will not be on stage right away
Summary
What is Animate.CSS
Explored entrance and exit animations
Reviewed the test projects