3
rpf.io/web-discover-style

Animation

Effects blur_medium

Discover explore

Web: HTML and CSS

In a web browser go to:
rpf.io/web-animate
Find <h1> </h1>.
Add a heading inside: <h1>Animation</h1>
Animation in large text in a font that suggests movement.
Insert a class to animate the heading:
<h1 class="movemeleft">Animation</h1>
Find the following line of code:

<img class="" src="rocket.png">.

Insert a class to animate the image:

<img class="bounceme" src="rocket.png">.

Choose: spinme, bounceme, scaleme, rollmeleft, rollmeright movemeleft, movemeright.


repeat Repeat  for the other four images.

Screenshot of webpage with the rocket image positioned higher than the others mid bounce animation. Screenshot of the completed webpage with ten images.
Extra: Add more sections of animated images to your page:

<section class="wrap xcenter">
   <img class="scaleme" src="stress.png">
</section>

Choose from: bus.png, mouse.png, explorer.png, stress.png,space.png