animation Archives - Andrew R Emery

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>

HTML Page

Start by creating an image in your html page and giving it a class. For this demo we will use the class “imageSpin”

<!doctype html> 
<html lang="en">
<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>Rotate Image in 3D</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<img src="areVisualLogoMark.png" alt="ARE Visual Logo Mark" class="imageSpin">
</body>
</html>

CSS Page

How the Animation will Work

The animation will utilize the CSS “rotateY” property. There will be two keyframes one where the image rotation is set to “0deg” and the other where it is set to “360deg”. The tweening between the “from” and “to” points will create the animation.

Creating the Animation

Start by creating the keyframe animation and naming it. For this demo I will be calling the demo spin.

@keyframes spin {
}

Now create the starting “from” value and the “to” value.

@keyframes spin {
 from{
 transform: rotateY(0deg);
 }
 to{
 transform: rotateY(360deg);
 }
}

Now we have to call the animation. To do this we select it by calling the class we gave our image. Next we need to set the “animation-name” that we defined earlier. After that we set the “animation-timing-function”, this is the CSS equivalent of easing. For this demo I am going to use “linear” value so the speed of the animation is consistent for the whole duration. Next we will define the “animation-iteration-count.” This is how many times the animation will repeat. For this demo we will set it to “infinite” so it will keep repeating. The last property we will set is “animation-duration” this is how long the animation will take to complete. For this we will use 5 seconds.

Adding browser specificity

CSS animations are still not completely universal. This step may not be needed but generally it is good practice. To make sure our animation renders correctly across browsers we want to add properties specific for each browser. To do this add the following code.

@keyframes spin {
 from{
 transform: rotateY(0deg);
 moz-transform: rotateY(0deg); //Firefox
 ms-transform: rotateY(0deg); //Microsoft Browsers
 }
 to{
 transform: rotateY(360deg);
 moz-transform: rotateY(360deg); //Firefox
 ms-transform: rotateY(360deg); //Microsoft Browsers
 }
}
@-webkit-keyframes spin{
 from{-webkit-transform: rotateY(0deg);}
 to{-webkit-transform: rotateY(360deg);}
}
.imageSpin{
 animation-name: spin;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-duration: 5s;
 -webkit-animation-name: spin;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 5s;
}

Download Demo

Andrew R Emery

Tag: animation

How to Create Page Transitions in Seconds Using CSS