Hack Session - Hack with HTML - CSS3 Animation

Step 1
Hack with HTML continues!

Get Ready

Last time, you learned how to edit colors, text values, and images of a webpage using HTML code. This time, we'll hack a rainbow animation effect using CSS3 code.

Next Up

Hack a rainbow animation into a website:

Information
Step 2
More Information

What is CSS3?

CSS3 refers to the newest and latest version of CSS. With CSS3 there are great improvements to animations and visual effects.

Here is a CSS3 animation:

In this Hack session, you will hack a rainbow animation into a website by editing the HTML and CSS3 code:

Step 3
Get Started! Open Google Chrome.
Step 4
Go to 'www.mvcodeclub.com' and open Inspect Element

Open Inspect Element:

Step 5
Use the magnifying glass and inspect the logo element's code.
Step 6
Right-click and choose "Edit HTML"
Step 7
Add to the HTML code a new class attribute
Step 8
Click the 'add' button on the Styles tab
Step 9
Add a new style name, ".animate-logo"

Do I need to type the dot?
Yes. This is how we call the class name in the HTML. Although we are creating a new CSS style, we are calling an HTML class name using the dot.

Step 10
Open, "inspector-stylesheet"
Step 11
Move your cursor inside of the curly brackets

Press Enter to create empty space inside of the curly brackets:

Step 12
Put these 3 lines of code inside of the curly brackets
Step 13
Add this chunk of code underneath

What is this code?

Voilà!

You have hacked the logo of this website to animate a rainbow color using CSS3 code. Nice work!

Hack Session - Hack with HTML - CSS3 Animation Info

Account

MVCode

Created By

matie

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach