Skip to main content

NOTICE: On Friday Nov 6, Workspaces will be temporarily unavailable for maintenance.

🚀 In our NEW AI Bootcamp you'll build a working app in 28 days, no experience required. Free to all subscription levels.

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

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

  • Treehouse Logo
    • For Individuals
    • For Businesses
    • For Schools
    • For Libraries
    • For Military
    • All Courses
    • Tracks
    • AI Bootcamp
    • College Credit
    • Techdegree Bootcamps
    • Front End Development
    • Full Stack JavaScript
    • Code Adventures
    • Discord
    • Forum
    • Success Stories
    • Treehouse Links
    • 100 Days of Code
    • Explore
    • Career Toolbox
    • Free Treehouse Near Me
    • Affiliates
    • Blog
    • Support
    • About
    • Learn
    • Beginner's Guide to Coding
    • Data Analysis with SQL & Python
    • Front-End Web Development
    • Python Programming Basics
    • Techdegree Bootcamp Overview
    • UX Design Fundamentals
    • AI Tools for Beginners
  • For Individuals For Businesses For Schools For Libraries For Military
  • All Courses Tracks AI Bootcamp College Credit
  • Techdegree Bootcamps Front End Web Development Full Stack JavaScript
  • Code Adventures Discord Forum Success Stories Treehouse Links 100 Days of Code
  • Explore Career Toolbox Free Treehouse Near Me Affiliates Blog Support About
    Learn Beginner's Guide to Coding Data Analysis with SQL & Python Front-End Web Development Python Programming Basics Techdegree Bootcamp Overview UX Design Fundamentals AI Tools for Beginners
  • Sign In
  • Free Trial
Instagram Twitter Facebook YouTube LinkedIn
Loading banner... Start your free trial at Treehouse
    • Newest
      • Newest
      • Active
      • Unanswered
      • Featured
    • All Topics
      • All Topics
      • • General Discussion
      • • AI
      • • 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
      • • Vibe Coding
  • 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,491 Points

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

    Posted February 1, 2018 9:07am by Hakim Rachidi
    Hakim Rachidi
    38,491 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.

Techdegree

  • Front End Web Development
  • Full Stack JavaScript
SEE ALL

Tracks

  • Learn to Code for Beginners
  • Beginning Python
  • Beginning SQL
  • Beginning Java
SEE ALL

Courses

  • JavaScript Basics
  • Intro to HTML & CSS
  • Python Basics
  • CSS Layout
SEE ALL

About Us

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

Explore

  • Plans
  • Affiliates
  • Perks
  • Shop
  • Free Treehouse Near Me
  • Treehouse for Libraries
  • Treehouse for Businesses

Treehouse is an online technology education platform founded in 2011. Treehouse offers more than 700 self-paced, video-based courses in web development, programming, data analysis, design, and AI, plus two project-based bootcamp programs in Front End Web Development and Full Stack JavaScript. Individual Treehouse plans start at $25 per month and include a 7-day free trial. Treehouse serves individual learners, businesses, schools, and public libraries. Cardholders at participating U.S. public libraries can use Treehouse for free. Select Treehouse courses, offered with University Pathways International, are recommended for college credit by ACE and NCCRS. Treehouse learners earn digital certificates for completed Tracks.

Terms & Conditions · Privacy · © 2026 Treehouse Island, Inc.
  • Twitter
  • YouTube
  • Facebook
  • LinkedIn
  • Instagram
  • Discord