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.

Temp1442688569

Next Up

Hack a rainbow animation into a website:

2015 09 19 13h00 39
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:

2015 09 19 11h51 20

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

2015 09 19 12h09 35
Step 3
Get Started! Open Google Chrome.
Temp1442690124
Step 4
Go to 'www.mvcodeclub.com' and open Inspect Element
Temp1442690402

Open Inspect Element:

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

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"
Temp1442691883
Step 11
Move your cursor inside of the curly brackets
Temp1442691960

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

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

What is this code?

Temp1442693309 Temp1442693239 Temp1442693129

Voilà!

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

2015 09 19 13h00 39
Hack Session - Hack with HTML - CSS3 Animation Info

Account

MVCode Clubs

Created By

Matie 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