Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Abe Layee
8,378 PointsCss3 Animation Bug.
Hello everyone.
I am trying to understand why my animation is fading in fast and also, it fades in with horizontal line at the bottom of the page before the animation load. What I am trying to say is that I don't what is causing the problem . The animation and the arrow at the bottom of the screen fade in together is like some kind of timer. Please take a look at my code
http://codepen.io/Layee/pen/rVmymK
full code page
http://codepen.io/Layee/details/rVmymK
4 Answers
Ted Sumner
Courses Plus Student 17,967 PointsI took a quick look at MDN on animation and there are code examples here. I don't see where you code the transform element like they did in the example for h1.
Ted Sumner
Courses Plus Student 17,967 PointsI am the first to admit that I know almost nothing about animation, but you have @keyframes in your CSS. I thought @ could only be used in a preprocessor like Sass.
Abe Layee
8,378 Pointsnot really Ted Summer. In css3 animation, we use @keyframes to start out the animation and give it the animation name. Just think of it as function is javaScript. I think of it as function. All the code inside the function will run when called.
function Animation() {
//code goes here
}
Animation();
Abe Layee
8,378 PointsI got it now. By adding the overflow:hidden; on the wrapper, it prevents the arrow at the bottom from scrolling along with the animation. Thanks a lot in advance.