This tutorial will show you how to create interesting CSS transitions on your HTML pages. Once learned these can be applied to any page in seconds to excite your users. To create these page transitions we will utilizing a well known open source CSS library called animate.css
Download Animate.css
To start go download animate.css.
While on the page it is important to notice each animation can be previewed by selecting it on the pull down list. Also notice how the animation is written. This is how the animation is written as a class.
Creating the Page Transition
Creating the page transition is very simple. Start by linking Animate.css into each of your HTML pages. Next you just need to add two classes to the HTML tags in each of your pages. First add the class “animated”. This class is required by the library for any element that will be animated. After this add the name of the animation you want to use for the transition and your done!
<!doctype html>
<html lang="en" class="animated fadeIn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Page Transitions with Animate CSS Page 1</title>
<link rel="stylesheet" href="_css/style.css"> <!--For page structure-->
<link rel="stylesheet" href="_css/animate.css">
</head>
<body>
<header role="banner" >
<h1 role="heading">CSS Page Transitions animate.css</h1>
<nav role="navigation">
<ul>
<li role="presentation"><a href="index.html">Page 1</a></li>
<li role="presentation"><a href="page2.html">Page 2</a></li>
<li role="presentation"><a href="page3.html">Page 3</a></li>
</ul>
</nav>
</header>
<main role="main">
<h2 role="heading">Page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>