CSS3 Animation Training

SkillsFuture Course - CSS3 Animation Training (Special Offer)

CSS animation offers a whole new way to bring motion to interactive projects. It's a core skill for web designers and developers and a feature users have come to expect from modern websites. This course will provide training on a series of basic CSS animation projects: site features such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more. This training will also cover CSS Flexbox, aka the Flexible Box Layout model, an important part of the evolution of CSS3 layouts.

Topics include:

• Using CSS transforms and transitions
• Working with animation-delay and animation-fill-mode
• Timing and easing CSS animations
• Animating elements in place
• Animating sprite images
• Animating CSS transforms and transitions
• Chaining multiple animations
• Animating SVG images
• Reviewing Flexbox support
• Defining elements
• Controlling element flow
• Wrapping content
• Defining display ratios
• Aligning single and multiple items
• Nesting flex containers

Module 1: CSS3 2D Transform

• Translate
• Rotate
• Scale
• Skew
• Origin 
• Matrix
• Transform Tools

Module 2: CSS3 3D Transform

• Perspective
• Perspective Origin
• Translate3d
• Scale3d
• Rotate3d
• Transform Style

Module 3: CSS3 Transition

• Transition Timing Functions
• Cubic-Beizer Function
• Transition Delay
• Transition Tools

Module 4: Transition on Transform

• Transition on Transform
• Challenge 1 : Color Transition
• Challenge 2: Size Transition
• Challenge 3: Opacity Transition

Module 5: CSS3 Animation

• Keyframe Rules
• Animation Delay
• Animation Fill Mode & Direction
• Animation Timing Functions
• Animation Play State

Module 6: Animation Challenges

• Challenge 1: Infinite Looping Animation
• Challenge 2: Multiple Animation
• Challenge 3: Chain Animation
• Challenge 4: SVG Animation

Module 7: Browser Support & Tools

• Browser Support
• Vendor Prefixes
• Auto Prefixer
• Online Tools