Welcome to another edition of {Kids: Code} Weekly! As we get ready to say goodbye to the month of June, we’re going to keep building up our CSS knowledge by creating a “custom animation” for our website. We’ll also have some great Scratch ideas for you to use for your next project and a story or two from the world of computer programming.
As always, if you have any questions you can feel free to reach out to us or check us out on Twitter!
Last week we saw how we could animate parts of our website using CSS. This is such a big (and fun) topic that we wanted to look a bit further this week. We'll walk through creating a custom animation, which can lead to some really creative uses!
The Setup
When we left off in our last issue, we had built our website using the following HTML code (index.html
):
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1 id="header">Welcome to my Website!</h1>
<p>Your own text here</p>
<button id="button">Show Message</button>
<script src="scripts.js"></script>
</body>
</html>
And our CSS code, in styles.css:
h1 {
color: red;
background-color: blue;
transition-duration: 1s;
transition-property: background-color;
}
h1.bluetext {
color: blue;
background-color: red;
}
And our JavaScript, in scripts.js:
var button = document.getElementById('button');
var h1 = document.getElementById('header');
button.addEventListener('click', function() {
h1.classList.toggle("bluetext");
}, false);
Let's see how we could make our background color change as a custom animation.
Animations with Keyframes
A keyframe is a piece of an animation - multiple keyframes make one animation. For example, we could make a custom animation with three keyframes, and each keyframe is one part of our animation.
Let's say that we want to animate the background color of our header text (like we're doing already), but do a custom animation that goes between the colors we want. To do this, we need to write our keyframes as CSS - and there's a handy way to do that!
Each keyframe starts with a @keyframe
block, and a name. For example:
@keyframes header-background-change {
from { background-color: blue; }
to { background-color: red; }
}
Animations or Transitions?
One thing you'll notice is that we need to update our CSS to use animation properties rather than transition properties. Transitions are good for simple animations, but using animation properties gives us more control to do custom things.
This keyframe is (for now) doing the same thing as our transition
that's in the CSS already. We just need to change our transition
CSS properties to animation
properties, and move them on to the .bluetext
class declaration - this is because we want the animation to be on the changing class, not the base one, otherwise our animation would happen on page load!
Our CSS now starts to look something like this:
@keyframes header-background-change {
from { background-color: blue; }
to { background-color: red; }
}
h1 {
color: red;
background-color: blue;
}
h1.bluetext {
color: blue;
animation-duration: 1s;
animation-name: header-background-change;
}
Save your work and reload your page, and click your button to toggle the changes. Your animation should work!
Customizing the Animation
Keyframe animations can do more than just from
and to
values - you can specify multiple frames to animate between! For example, we could customize our keyframe animation to change between three background colors over one second by using percentages:
At 0% (the beginning) of one second, set a background color
At 50% (the middle) of one second, set a different background color
At 100% (the end) of one second, set the final background color
The CSS for this would look like this:
@keyframes header-background-change {
0% { background-color: blue; }
50% { background-color: green; }
100% { background-color: red; }
}
You can do as many percentage frames as you'd like - and space them over as much time as you like. This is the key to making custom animations. Try messing around with the values and seeing what kind of animations you can create!
Have you ever wondered how you’d be able to code if you couldn’t see? That’s a problem that many people - kids and adults - face not just with coding, but with every day tasks and hobbies. Luckily, there’s been a lot of great things done to help people who are visually impaired to still have access to the things they need.
For example, this week we want to highlight the work of Alphapointe, an organization that promotes accessibility for the visually impaired. They recently put together a little summer camp in their home of Kansas City that taught visually impaired students to code using music, thus letting these kids still do what they love!
You can read/watch about this summer camp here.
We’ve been talking about Scratch for so long that you probably know more about it than we do at this point. That’s not gonna stop us from sharing all the different ways to learn from it!
If you want inspiration for your next big Scratch experiment or are just interested in seeing all the stuff that other kids are able to build, you can click here to see a collection of classroom projects put together for Scratch Week a month ago. These were put together with the help of Makey Makey, which we’ve talked about quite a bit in our newsletter, so if you’re not familiar you can definitely check out what they can do here.
Keep in mind that you can make so many cool things with just your Scratch program! If you ever feel left out because you don’t have a Makey Makey or any of the books or tools we feature in {Kids: Code}, just know that it isn’t always going to stop you from building your dream projects, so keep dreaming big!
For the Parents
Several weeks back we talked about a big issue in the world of technology today and that is the “digital divide” - the difficulty of succeeding in the world for some people that don’t have easy access to computers and the Internet. This is a growing concern and we wanted to share a story that highlights the ways in which it’s being tackled.
This story, which you can read here, takes place in Aberdeen, Mississippi, where a majority-black high school struggled with funding for distance learning and IT services among other things. The article talks about how the faculty worked to combat this problem and continues to highlight the importance of tech literacy for students of all ages.
This Week’s Vocabulary Word
Keyframe
One frame (piece) of an animation. Many keyframes make up one animation.