Not all animations have to be flashy and doing all sorts of things to grab your attention. Some of the best uses for animation are in the subtle cases—the cases where you may not even notice an animation is present. In this chapter, we’ll create one such animation whose existence is purely to add some sugary, frosty value. To see this animation, navigate your browser to http://bit.ly/subtle_animation.
If you don’t have access to a browser where you can view it live, take a look at the following video:
This example is a very quick animation that fades some text in. Along with the fade, your text scales (or zooms) in as well. In this deconstruction, we’ll look at how this effect was created by primarily focusing on the CSS animation responsible for it.
The Example
The full HTML and CSS for this example looks as follows:
<!DOCTYPE html><html><head><title>Example Of Many Things!</title><style>body{background-color:#F5F5F5;margin:50px;margin:25px000;}#main{text-align:center;background-color:#82C1FF;width:600px;height:300px;margin:0auto;border-radius:5px;}h1{font-size:88px;font-family:Arial,Helvetica,sans-serif;font-weight:normal;color:#FFF;margin:0;padding:
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
