Chat with us, powered by LiveChat CSS Animation | Abc Paper

You are going to be animating something using Dan Eden’s Animate.CSS.Create a one page website. Be sure you have at least a level two heading which displays your full name, an image of something that represents you (i.e. a pet, a place, or an object that is meaningful to you), and a paragraph about yourself.Visit Dan Eden’s Animate.css website. Download the CSS code and link it to your HTML. It is not recommended that you modify the CSS.Try out the different animations on the Animate.CSS site, and choose one that you would like to apply to the level two heading, and a different one to apply to the image. If you’d like, get more creative. Animate.css creates the classes needed to animate an element on a webpage. For example, if you would like to animate a level two heading so it bounces, add the animated class and the bounce class to the tag, like this:

class=”animated bounce”>Lovely Heading

Further information is at Dan’s GitHub.Take a look at Dan Eden’s CSS code used to create the animations. The @keyframe code specifies what the animation will look like at different points in time. The percentages represent keyframes (from is the first keyframe, to is the last keyframe), and the CSS properties specify what the animation should look like at that point in time. The browser does the “tweening.”

error: Content is protected !!