Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Cover
Title
Copyright
Dedication
Contents at a Glance
Contents
About the Author
Introduction
Chapter 1: CSS3 Fundamentals
Development of CSS
CSS Vendor Prefixes
Vendor Prefixing Issues
CSS3 Browser Support
Limitations of CSS3 Animation
Design Principles: Progressive Enhancement and Graceful Degradation
Why CSS3 Rather Than JavaScript or Flash?
Other Technologies
Summary
Chapter 2: CSS3 Transforms and Transitions
CSS Transforms
Rotate
The Webkit CSS3 Transform Aliasing Issue
Scale
Translate
Skew
Combining Transformations
CSS Transitions
Delaying and Combining Transition Effects
Introducing Easing Functions
Transition Timing Functions and Bezier Curves
Summary
Chapter 3: CSS3 Transitions for Images
Simple Image CrossFade Effect
Option 1: First Image As a CSS Background
Option 2: Both Images As HTML Elements
Option 3: Both Images As Backgrounds
A Simple Image Gallery Enhanced with CSS3
The HTML Markup
The Initial CSS
Improving the Gallery
Adding Captions
Changing the Initiating Event
Simple Popup Image Captions
Image Card Stack and Fan Reveal
Clapperboard Image Captions with Different Entry and Exit Effects
Creating Separate Transition Sequences
Changing the Exit Event
Background Image Transitions and Animation on Page Load
Animating the Background Images on Load
Creating and Animating Fake Background Images
Summary
Chapter 4: CSS3 Transitions for UI Elements
Modern Site Navigation Markup
Horizontal Navigation Bar Basics
A Simple Navigation Bar Enhanced with CSS3
Highlighting the Current Page in Navigation
Horizontal Tab Navigation with CSS3 Transitions
Animating Custom Validation Errors for HTML5 Forms
UI Button Depress Transition
UI Button Reveal Transition
Accessible Horizontal Drop-down Navigation with CSS3 Transitions
Initiating CSS3 Transition Effects After a Button Click
Animating Form Elements with CSS3
Summary
Chapter 5: CSS3 Keyframe Animations
Keyframes and Tweening
CSS3 Keyframe Animation Syntax
Support for Keyframe Animation in Older Browsers
Controlling Keyframe Animation Playback
Blending and Chaining Keyframe Animations
Repeating Animation Sequences
Pausing Keyframe Animations
Summary
Chapter 6: CSS3 Keyframe Animations for Web Content
A Simple CSS3 Slideshow
The HTML Code
A Variation with Background Images
Pausing the Slideshow
Altering the Transition Between Images
Fade-In-Out
Fade-In-Out During Motion
CrossFade
Adding Captions
An On-Click Method for Pause
Creating a Fallback for Older Versions of Internet Explorer
A Caution Against Using Marquee Animation for Text
News Ticker/Notification Animation
A Lightbox Image Gallery Equivalent in CSS3
Adding Captions
Logo Animation on Page Load
Summary
Chapter 7: Integrating CSS3 Animations with SVG and Filters
An Introduction to SVG
Placing SVG on a Web Page
SVG As an Inline Image
Inline SVG
SVG Added As an Object or iframe
Manipulating SVG with CSS
An Animated SVG Imagemap
SVG Snowflake Animation
Tools for SVG
Introduction to CSS3 Filters
Summary
Chapter 8: Integrating CSS3 Animation with Responsive Web Design and JavaScript
Resizing Elements in Responsive Web Design Without Transitions
Dynamically Resizing Images and Videos
Responsive Background Images
Resizing Elements in Responsive Web Design with Transitions
Indicating Viewport Size with CSS3 Media Queries and Transitions
Optimizing CSS Transitions and Animations for Mobile Devices
Integrating CSS3 Media Queries with SVG
Triggering CSS3 Transitions with JavaScript
Customizing CSS3 Transitions with JavaScript
Summary
Chapter 9: CSS3 3D Transforms, Transitions, and Animations
Perspective
Rotation
Translate
Card Caption Flip
Backface Visibility
Transform Style
A Circular 3D Gallery
Enhancing the Gallery with Level-4 Selectors and JavaScript
Adding a CSS Level-4 Selector
3D CSS Transforms and Transitions for UI Elements
Summary
Chapter 10: Tools, Technologies, and the Future of CSS Animation
Writing Effective CSS3 Animations and Transitions: Avoiding Reflows
Automatic Prefixing Tools: Client-Side
-prefix-free
SASS, LESS, Compass and Codekit
Automatic Prefixing Tools: Server-Side
GUI-Based CSS3 Animation Tools
Sencha Animator
Adobe Edge Animate
Animatable
Tumult Hype
Future Trends: CSS Custom Filters
Future Trends: Blending and Compositing
Future Trends: Reconciling CSS3 and SVG
Summary
Index
← Prev
Back
Next →
← Prev
Back
Next →