book

Creating Web Animations

by Kirupa Chinnathambi

March 2017

Beginner

210 pages

English

O'Reilly Media, Inc.

Read now

Unlock full access

Know Your Basic HTML, CSS, and JavaScriptAbout Authoring ToolsUsing the Code ExamplesO’Reilly SafariGetting Help/Contacting the AuthorContacting O’ReillyAcknowledgments
What Is an Animation?The Start and End StatesInterpolationAnimations on the WebConclusion
Creating a Simple AnimationWhat Just HappenedThe NameDuration and KeyframesLoopingThe Longhand VersionConclusion
Creating a Simple TransitionWhat Just HappenedThe Longhand VersionConclusion
What Is a Timing Function?Timing Functions in CSSTiming Functions in CSS AnimationsTiming Functions in CSS TransitionsMeet the Timing Function CurveThe cubic-bezier Timing FunctionThe step Timing FunctionConclusion
What Is a Smooth Animation?Creating Responsive 60 fps AnimationsMeet the Animation-Friendly PropertiesPush Element Rendering to the GPUConclusion
It’s Just Property ChangesThe ExampleInitial State Using CSS, Changes Using JSWhat Just Happened?A Tale of Two Styling ApproachesSetting the Style DirectlyAdding and Removing Classes Using JavaScriptAnimating with requestAnimationFrameConclusion
SimilaritiesDifferencesTriggeringLoopingDefining Intermediate Points/KeyframesSpecifying Properties Up FrontInteraction with JavaScriptConclusion

The Starting PointAnimated UnderlineSimple Background Color ChangeCooler Background Color ChangeConclusion
The ExampleThe CSS AnimationThe Easing FunctionConclusion
How the Sliding Menu WorksCreating the Sliding MenuThe Initial PageAdding the MenuMaking the Menu WorkAdding Some Finishing TouchesConclusion
The Basic IdeaThe ContentIt’s Scrolling TimeIdentifying the ElementsModifying the ElementsBuilding It All OutListening to the Scroll EventDetecting When Elements Are VisiblePutting It All TogetherSome Performance ConsiderationsConclusion
The Full HTML and CSSDeconstructing This EffectLooking at the CSSFaking RandomnessSlightly Different Variants of Style Rules + KeyframesAltering Some CSS Properties and Their Values…Inline!Conclusion
Overview of How the Parallax Effect WorksGetting StartedAdding Our Background ElementsThe JavaScriptConclusion
Creating the Sprite SheetThe Actual ImplementationIt’s Animation TimeThe Steps Easing Function in ActionConclusion
Overview of How It WorksThe ContentThe Content (For Realz This Time)What You Just DidClipping the ContentThe Navigation LinksMaking the Content Actually SlideAdding the JavaScriptAdding the TransitionUnderstanding the Code (and More!)What’s Really Going OnThe Role of the data-pos AttributeIt’s All About the JavaScriptConclusion
Until Next Time

Content preview from Creating Web Animations

Chapter 9. Simple Text Fade and Scale Animation

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: 25px 0 0 0;
    }
    #main {
      text-align: center;
      background-color: #82C1FF;
      width: 600px;
      height: 300px;
      margin: 0 auto;
      border-radius: 5px;
    }
    h1 {
      font-size: 88px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      color: #FFF;
      margin: 0;
      padding: