SubscribeSign In
  • How-To Tutorials
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Game Development
    • Computer Skills
  • Courses
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
  • eBooks
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
  • Pricing
  • Envato Elements
  • Envato Studio
  • Community
  • Help
envato-tuts+
  • Envato Elements
  • Envato Studio
  • Community
  • Forum
  • Help
  • Subscribe
  • Sign In
  • How-To Tutorials
    • Design & Illustration
      • Adobe Photoshop
      • Vector
      • Adobe Illustrator
      • Illustration
      • Inspiration
      • Tools & Tips
      • Graphic Design
      • Text Effects
      • Drawing
      • News
      More Categories...Learning Guides
    • Code
      • Web Development
      • Mobile Development
      • WordPress
      • PHP
      • JavaScript
      • Flash
      • CMS
      • Android SDK
      • iOS SDK
      • News
      More Categories...Learning Guides
    • Web Design
      • CSS
      • HTML
      • UI Design
      • HTML & CSS
      • UX
      • JavaScript
      • Adobe Photoshop
      • Complete Websites
      • Workflow
      • Design Theory
      More Categories...Learning Guides
    • Photo & Video
      • Shooting
      • Video
      • Adobe Photoshop
      • Post-Processing
      • Photography
      • Photo Critique
      • How-To
      • Inspiration
      • Lighting
      • Adobe Lightroom
      More Categories...Learning Guides
    • Business
      • How-To
      • Marketing
      • Freelance
      • Presentations
      • Communication
      • Software
      • Planning
      • Small Business
      • Microsoft PowerPoint
      • Inspiration
      More Categories...Learning Guides
    • Music & Audio
      • Audio Production
      • General
      • Logic Pro
      • Workshops
      • Mixing & Mastering
      • Sound Design
      • Open Mic
      • Ableton Live
      • Reason
      • Recording
      More Categories...Learning Guides
    • 3D & Motion Graphics
      • Adobe After Effects
      • 3D
      • Motion Graphics
      • 3D Studio Max
      • Maya
      • Cinema 4D
      • Workflow
      • News
      • Visual Effects
      • Roundups
      More Categories...Learning Guides
    • Game Development
      • Programming
      • Game Design
      • Platform Agnostic
      • Business
      • 2D Games
      • News
      • Game Development
      • Unity
      • Flash
      • Unity 3D
      More Categories...Learning Guides
    • Computer Skills
      • OS X
      • How-To
      • Software
      • App Training
      • Presentations
      • Microsoft PowerPoint
      • Productivity
      • Microsoft
      • Tips & Shortcuts
      • Spreadsheets
      More Categories...Learning Guides
  • Courses
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Coming Soon
  • eBooks
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
  • Pricing
  1. Web Design
  2. CSS Animation
Webdesign
Advanced CSS3 Animations
by Craig Campbell23 Aug 2013
Lessons:19Length:2.2 hours
CSS AnimationCSS3HTML
Crs 18
For full access to all 19 lessons, including source files, subscribe with Elements.

4.7 Animating the Fences

With the pig animation finished, it's time to animate the fences in the background. In this lesson we create a seamless loop for the fences that will complete the animation.

1.Introduction
1 lesson, 01:26

Free Lesson
1.1
Introduction
01:26

2.3D Transitions
2 lessons, 19:55

Free Lesson
2.1
A Primer on Transitions
09:50

2.2
3D Transformations
10:05

3.Project 1: 3D Transitions
8 lessons, 55:56

3.1
Filling in the HTML (3D Transitions)
06:35

3.2
Styling the Page
08:36

3.3
Using Perspective in WebKit Browsers
06:13

3.4
Animated 3D Mouseovers
07:06

3.5
Fallback for Non-WebKit Browsers
03:47

3.6
Animating from Beginning to End
08:14

3.7
Animation Properties
09:09

3.8
Adding Keyframes in Between
06:16

4.Project 2: Advanced Looping Animation
7 lessons, 54:11

4.1
Preparing Images for Animation
11:42

4.2
Filling in the HTML
06:45

4.3
Placing Images with CSS
10:27

4.4
Animating the Legs
07:48

4.5
Animating the Body
04:24

4.6
Animating the Tail and Ear
04:47

4.7
Animating the Fences
08:18

5.Conclusion
1 lesson, 01:04

5.1
Final Thoughts
01:04


Craig
Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
craigsoup
Continue watching with Elements
Elements
Unlimited Downloads
From $29/month
Get access to over 400,000 creative assets on Envato Elements.
Market
Over 9 Million Digital Assets
Everything you need for your next creative project.
Studio
Hire a Freelancer
Choose from 2,000 professionals ready to do the work for you.
Community
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
  • Web Themes & Templates
  • WP Themes
  • HTML Templates
  • Shopify Themes
  • Bootstrap Themes
  • Free WordPress Themes
  • Video
  • After Effects Templates
  • Apple Motion Templates
  • Video Effects
  • Lower Thirds
  • Stock Footage
  • Audio
  • Royalty Free Music
  • Sound Effects
  • Best Selling Royalty Free Music
  • Logic Pro Files
  • Background Music
  • Code
  • WordPress Plugins
  • PHP Script
  • JavaScript
  • CSS Templates
  • PrestaShop Plugins
  • Graphics
  • Logo Templates
  • Business Card Templates
  • Lightroom Presets
  • Serif Fonts
  • Sans-serif Fonts
  • Photos
  • Food Stock Photos
  • Animal Stock Photos
  • Tech Stock Photos
  • Fitness Stock Photos
  • Nature Stock Photos
  • 3D Files
  • 3D Renders
  • 3D Car Models
  • 3D Shaders
  • CG Textures
  • OBJ Files
  • Websites
  • Online Store Designs
  • WordPress Website Designs
  • Personal Websites
  • Photography Websites
  • Portfolio Websites
  • Elements
  • WordPress Themes
  • Stock Images
  • Website Templates
  • Logos
  • Fonts
  • Tuts+
  • Learn Code
  • Learn Graphic Design
  • Learn Business
  • Learn Photography
  • CryptoCurrency Tutorials & Ebooks
Envato Tuts+
About Envato Tuts+
Terms of Use
Advertise
Join our Community
Teach at Envato Tuts+
Translate for Envato Tuts+
Forums
Help
FAQ
Help Center
envato-tuts+
25,789
Tutorials
1,118
Courses
22,795
Translations
  • Envato.com
  • Our products
  • Careers
  • Sitemap
© 2018 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
  • Follow Envato Tuts+