Treehouse | Community | Creating an SVG Animation Sequence

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

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

Curious which AI tools Treehouse developers love? ⚙️ Check them out!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Newest
- Newest
- Active
- Unanswered
- Featured
All Topics

PLUS

Lucian Dumitru
Courses Plus Student 13,024 Points
Animations does not work on Edge/Internet explorer. Why?

Posted June 5, 2016 6:56pm by Lucian Dumitru

Lucian Dumitru
Courses Plus Student 13,024 Points
3 Answers
PLUS

Chibueze Oti
Courses Plus Student 9,108 Points
In style .css create a new rule that target .star-bg.Add 1s transition for the fill property

Posted May 27, 2016 6:21pm by Chibueze Oti

Chibueze Oti
Courses Plus Student 9,108 Points
2 Answers
Any One
173 Points
I have already added a transition.

Posted May 24, 2016 10:43am by Any One

Any One
173 Points
1 Answer
Paul M
16,370 Points
In the HTML file, add an SVG element that will group the circle and path elements.

Posted May 18, 2016 9:53pm by Paul M

Paul M
16,370 Points
3 Answers
ramseydennis
4,530 Points
The heart icon isn't animating - what is wrong with my code? Thanks -

Posted May 7, 2016 2:14am by ramseydennis

ramseydennis
4,530 Points
3 Answers
Juan Pino
25,107 Points
An animation-fill-mode value of will immediately apply the first animation keyframe to an element.

Posted May 5, 2016 12:54pm by Juan Pino

Juan Pino
25,107 Points
2 Answers
Evan MacAlpine
7,173 Points
Css animation not working in Safari

Posted March 21, 2016 4:45pm by Evan MacAlpine

Evan MacAlpine
7,173 Points
1 Answer
R.P. Arts
22,284 Points
please help what is the answer ? animating SVG with CSS

Posted March 19, 2016 10:13pm by R.P. Arts

R.P. Arts
22,284 Points
2 Answers
Edgar Gil
13,322 Points
Something II Notice stroke-dasharray finding the perfect length.

Posted March 17, 2016 1:35am by Edgar Gil

Edgar Gil
13,322 Points
0 Answers
Piper Nilsson
858 Points
do these :hover effects work on mobile devices?

Posted March 13, 2016 1:00pm by Piper Nilsson

Piper Nilsson
858 Points
3 Answers
Piper Nilsson
858 Points
when I applied a transform "scale" to my logo it scaled outside the viewbox (so it looked cropped)

Posted March 13, 2016 12:55pm by Piper Nilsson

Piper Nilsson
858 Points
1 Answer
Stetson Nash
17,603 Points
Fill not working Safari

Posted March 13, 2016 12:36am by Stetson Nash

Stetson Nash
17,603 Points
0 Answers
tina duyen tran
5,740 Points
How do i select properties within a class for SVGs to style it using CSS?

Posted March 8, 2016 12:33am by tina duyen tran

tina duyen tran
5,740 Points
2 Answers
Alex Oates
7,171 Points
Line animation fill won't work with safari?

Posted March 4, 2016 10:53pm by Alex Oates

Alex Oates
7,171 Points
0 Answers
Kevin Oriz
7,500 Points
I'm lost on what to do on this part

Posted March 4, 2016 4:15am by Kevin Oriz

Kevin Oriz
7,500 Points
2 Answers
Abhishek Bhardwaj
3,316 Points
change text position in svg

Posted March 3, 2016 2:04pm by Abhishek Bhardwaj

Abhishek Bhardwaj
3,316 Points
0 Answers
Abhishek Bhardwaj
3,316 Points
Error showing even code is correct

Posted March 2, 2016 6:32pm by Abhishek Bhardwaj

Abhishek Bhardwaj
3,316 Points
1 Answer
Abhishek Bhardwaj
3,316 Points
Animation not working in Internet explorer's latest version ?

Posted March 2, 2016 6:19pm by Abhishek Bhardwaj

Abhishek Bhardwaj
3,316 Points
2 Answers
Jacob Brech
7,224 Points
Question about the delay property used in animation

Posted March 1, 2016 10:20am by Jacob Brech

Jacob Brech
7,224 Points
2 Answers
Jennifer James
6,430 Points
Arrrgh! whats wrong with my code???

Posted February 29, 2016 4:34pm by Jennifer James

Jennifer James
6,430 Points
2 Answers
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
2 Answers
Robert Andrade
7,554 Points
Challenge Task 2 of 6

Posted February 16, 2016 12:36am by Robert Andrade

Robert Andrade
7,554 Points
1 Answer
Maja Savic
7,688 Points
How do I target .star-bg and add a 1s transition for the fill property?

Posted February 14, 2016 8:30pm by Maja Savic

Maja Savic
7,688 Points
2 Answers
Ilonka Hofmann
4,916 Points
SVG rotation is not pivoting from center point with 50% 50% rule

Posted February 14, 2016 1:39am by Ilonka Hofmann

Ilonka Hofmann
4,916 Points
4 Answers
Jamie Guerrero
2,771 Points
I can see the effect of the fill transition working here in the preview, however rechecking my work won't let me pass.

Posted February 9, 2016 6:11pm by Jamie Guerrero

Jamie Guerrero
2,771 Points
2 Answers
Arturo Gutierrez
11,414 Points
It tells me to target the fill property with the transition property but it says I haven't done that.

Posted January 29, 2016 2:03am by Arturo Gutierrez

Arturo Gutierrez
11,414 Points
2 Answers
Keith Corona
9,553 Points
Finishing the animation sequence - what if we wanted the star points to delay in a specific order?

Posted January 26, 2016 7:41am by Keith Corona

Keith Corona
9,553 Points
2 Answers
Pier-Luc Cossette
4,588 Points
The line animate in the wrong direction

Posted January 16, 2016 8:39pm by Pier-Luc Cossette

Pier-Luc Cossette
4,588 Points
1 Answer
Scott Peake
17,052 Points
Seriously????

Posted December 27, 2015 7:22am by Scott Peake

Scott Peake
17,052 Points
4 Answers
Kevin Smothers
1,269 Points
I have this set... .star { transform-origin: 50% 50%; } I also tried the absolute position using 180px 180px also

Posted November 18, 2015 7:41am by Kevin Smothers

Kevin Smothers
1,269 Points
2 Answers

Prev Page 4 of 6 Next

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