🤑 Join the Treehouse affiliate program and earn 25% recurring commission!

New No-Code Track! 🚀 New videos dropping every week—start learning today!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

  • Treehouse Logo
  • Plans
    Chevron
    • For Individuals
    • For Businesses
    • For Schools
    • For Libraries
    • For Military
  • Library
    Chevron
    • All Courses
    • Tracks
    • College Credit
  • Techdegree
    Chevron
    • Overview
    • Front End Development
    • Full Stack JavaScript
    • Data Analysis
    • UX Design
    • Python
  • Community
    Chevron
    • Community Projects
    • Live Sessions
    • Code Adventures
    • Discord
    • Forum
    • Success Stories
    • Treehouse Links
    • 100 Days of Code
  • Resources
    Chevron
    • Career Toolbox
    • CodeForward
    • Free Treehouse Near Me
    • Jobs
    • Blog
    • Support
    • About
  • For Individuals For Businesses For Schools For Libraries For Military
  • All Courses Tracks College Credit
  • Overview Front End Web Development Full Stack JavaScript Python Development Data Analysis UX Design
  • Community Projects Live Sessions Code Adventures Discord Forum Success Stories Treehouse Links 100 Days of Code
  • Career Toolbox CodeForward Free Treehouse Near Me Jobs Blog Support About
  • Sign In
  • Free Trial
Instagram Twitter Facebook YouTube LinkedIn
    • Newest
      • Newest
      • Active
      • Unanswered
      • Featured
    • All Topics
      • All Topics
      • • General Discussion
      • • AI
      • • Android
      • • APIs
      • • Coding for Kids
      • • College Credit
      • • Computer Science
      • • CSS
      • • Data Analysis
      • • Databases
      • • Design
      • • Development Tools
      • • Digital Literacy
      • • Game Development
      • • Go Language
      • • HTML
      • • Java
      • • JavaScript
      • • Learning Resources
      • • Machine Learning
      • • No-Code
      • • PHP
      • • Professional Growth
      • • Python
      • • Quality Assurance
      • • React
      • • Ruby
      • • Security
      • • Swift
  • Zowie Erickson
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    Zowie Erickson
    Front End Web Development Techdegree Graduate 16,203 Points

    Sharing my solution

    Posted April 3, 2021 9:49pm by Zowie Erickson
    .a{fill-rule:evenodd;}techdegree seal-36
    Zowie Erickson
    Front End Web Development Techdegree Graduate 16,203 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Nick Huemmer
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    Nick Huemmer
    Front End Web Development Techdegree Graduate 26,840 Points

    I really struggled with this challenge - I didn't know where to start or how to figure it out.

    Posted October 20, 2020 12:24am by Nick Huemmer
    .a{fill-rule:evenodd;}techdegree seal-36
    Nick Huemmer
    Front End Web Development Techdegree Graduate 26,840 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Muaaz Matwadia
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    Muaaz Matwadia
    Full Stack JavaScript Techdegree Graduate 19,327 Points

    Something wrong with the second keyframe

    Posted August 5, 2020 6:20am by Muaaz Matwadia
    .a{fill-rule:evenodd;}techdegree seal-36
    Muaaz Matwadia
    Full Stack JavaScript Techdegree Graduate 19,327 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • cristian lemus
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    cristian lemus
    Full Stack JavaScript Techdegree Graduate 25,790 Points

    Why not use translateY intead of translate3D if we are only changing the Y value?

    Posted April 6, 2020 5:15pm by cristian lemus
    .a{fill-rule:evenodd;}techdegree seal-36
    cristian lemus
    Full Stack JavaScript Techdegree Graduate 25,790 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Nathan Marshall
    Nathan Marshall
    6,031 Points

    Why wont this work?

    Posted July 9, 2018 5:54pm by Nathan Marshall
    Nathan Marshall
    6,031 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Hakim Rachidi
    Hakim Rachidi
    38,490 Points

    Transform-origin (in percent) not working in High Sierra?!

    Posted February 1, 2018 9:07am by Hakim Rachidi
    Hakim Rachidi
    38,490 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Andrew Lim
    Andrew Lim
    8,004 Points

    Why does this not work if you don't set the transform: scale(1); in the grow keyframes?

    Posted October 24, 2017 6:48am by Andrew Lim
    Andrew Lim
    8,004 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • ld82
    ld82
    2,401 Points

    Unable to chain animations

    Posted April 28, 2017 8:37pm by ld82
    ld82
    2,401 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • Elise St Hilaire
    Elise St Hilaire
    13,358 Points

    Can't get animation to work

    Posted December 4, 2016 11:07pm by Elise St Hilaire
    Elise St Hilaire
    13,358 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    0 Answers

  • Ahmed SALMI
    Ahmed SALMI
    18,235 Points

    the animation don't work properly specially in the part of slide

    Posted February 19, 2016 1:21am by Ahmed SALMI
    Ahmed SALMI
    18,235 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    2 Answers

  • Albert Yih
    Albert Yih
    2,195 Points

    Translate3d not working with the scale up

    Posted October 13, 2015 6:10pm by Albert Yih
    Albert Yih
    2,195 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    2 Answers

  • Rami Awar
    Rami Awar
    5,435 Points

    My animation, right after creating the slideup, isn't working. [SOLVED]

    Posted July 22, 2015 3:26pm by Rami Awar
    Rami Awar
    5,435 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    1 Answer

  • james white
    james white
    78,399 Points

    Great Job Guil!

    Posted July 17, 2015 9:04pm by james white
    james white
    78,399 Points
    • CSS
    • Animating SVG with CSS
    • Keyframe and Line Drawing Animations
    • The Animation Challenge Solution

    0 Answers

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

    Treehouse

  • About
  • Blog
  • Careers
  • Community
  • Stories
  • Shop
  • Contact
  • Gift Card

See Full Catalogue

Techdegree

  • Front End Web Development
  • Full Stack JavaScript
  • Python Development
  • Data Analysis
  • UX Design

Tracks

  • Learn to Code for Beginners
  • Beginning Python
  • Beginning SQL
  • Beginning Java
  • ...see more

Courses

  • JavaScript Basics
  • Intro to HTML & CSS
  • Python Basics
  • CSS Layout
  • ...see more

Explore

  • Plans
  • Affiliates
  • Perks
  • Free Treehouse Near Me
  • Treehouse for Libraries
  • Treehouse for Businesses
  • Twitter
  • YouTube
  • Facebook
  • LinkedIn
  • Instagram
Terms & Conditions | Privacy

© 2025 Treehouse Island, Inc.