Animation（转）

---

Animation翻译系列文章

---

Tutorials, videos, and even a book to help you learn how to create great animations in HTML, CSS, and JavaScript.

---

The Basics

• Introduction to Animation in HTML （译）
• Dealing with Vendor Prefixes in CSS and JavaScript （墙内云盘分享）

CSS Animations and Transitions

• All About CSS Animations（译）
• All About CSS Transitions（译）
• CSS3: Animations vs. Transitions （译）
• Easing Functions in CSS3 （译）
• Animating Movement Smoothly Using CSS （译）
• The CSS Animation Events（译）
• The transitionEnd Event（译）
• Get the Value of CSS Properties As They Are Animating（译）
• Looping a CSS Transition（译）

Examples Using CSS Animations and Transition

• Slide Image on Hover using CSS3（译）
• Sliding Background Effect on Link Hover（译）
• Animating Many Elements Using a Transition
• Creating a Sweet Content Slider
• Move Element to Click Position
• Simple Text Fade and Scale Animation
• Getting Jittery on Hover
• The Tag Shall Live On
• Rounded Image Links with a Sweet Hover Effect
• Slide and Bounce an Image on Hover
• Creating the iOS Icon Jiggle / Wobble Effect

Animating in Code

• Animating in Code Using JavaScript
• Animating with requestAnimationFrame
• Animation Loops using requestAnimationFrame
• Creating a Simple HTML5 Canvas Animation
• DOM vs. Canvas
• Introduction to Easing in JavaScript
• Animating with Robert Penner's Easing Functions
• Animating Many Things on a Canvas
• Frame Rates and HTML/JavaScript

Examples Involving Animations Created in Code

• Animated Scroll to Top with Easing
• Smooth Parallax Scrolling
• Creating a Strobe Light Generator
• Amorphous Circles
• The Falling Snow Effect
• Deconstruction: Irritated Bubbles
• Creating a Basic Particle System