Call +65 6100 0613

Instructor-Led Classroom Adult Training in Singapore - Learn New Skills to Enhance Your Employability from our SkillsFuture Courses

CSS3 Animation Training

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

SkillsFuture Credit Applicable for Individual

WDA Training Grant Applicable for Company

Course Code: CRS-N-0033788

Course Booking


Course Date

Course Time

* Required Fields

Course Cancellation/Reschedule Policy

We reserve the right to cancel or re-schedule the course due to unforeseen circumstances. If the course is cancelled, we will refund 100% to participants.
Note the venue of the training is subject to changes due to class size and availability of the classroom.
Note the minimal class size to start a class is 3 Pax.

Course Details

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

Who Should Attend

  • For those who want to go beyond basic CSS3 and learn advanced CSS3
  • For those who want to learn CSS3 animation


This course requires participants to have basic knowledge on HTML5 and CSS3.


Web Design TrainrLord is a detail-oriented web developer that is passionate about delivering a compelling final product. He started playing with codes when he was in high school and has not stopped since. He specializes in WordPress, and is also familiar with Shopify, SquareSpace and Wix. With more than 5 years of professional web development experience in the Philippines and Singapore, he knows how to prioritize tasks and organize workload effectively. He is an avid learner who loves to acquire new skills for continuous growth and development

Write Your Own Review

You're reviewing: CSS3 Animation Training

How do you rate this product? *

  1 star 2 stars 3 stars 4 stars 5 stars
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
  • Reload captcha


Other people marked this product with these Subjects:

Use spaces to separate Subjects. Use single quotes (') for phrases.

You May Be Interested In These Courses