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
George S-T
6,624 PointsWhy won't my animation work?
Page: http://web.ehwscevf9q.treehouse-app.com/files/#cont2
Code for keyframe:
-webkit-@keyframes home {
0 {top:-50%}
100 {top:47.5%}
}
Code for the #home div which contains the logo and paragraph:
#home {
left:50%;
top:47.5%;
width:680px;
height:300px;
margin-top: -150px;
margin-left: -340px;
-webkit-animation: home 3s ease-out;
}
Why isn't the div dropping from the top of the page when it loads?
Adam Sackfield
Courses Plus Student 19,663 PointsWill have a look at it now
Adam Sackfield
Courses Plus Student 19,663 PointsGeorge S-T can you add all the code to a codepen for me and I will have a look what I can do. One thing I do notice is that if your using left,top,right,bottom etc you should have position set to relative. But add to codepen and paste the link in here
George S-T
6,624 Points
Adam Sackfield
Courses Plus Student 19,663 PointsGreat now can you give me a brief summary of what the animation is meant to do? Thanks George S-T
George S-T
6,624 PointsThe div which contains the logo and heading are supposed to drop down from out of the screen.
Adam Sackfield
Courses Plus Student 19,663 PointsRight instead of animating the top. I would first use transform: translate(0,-100px); To move it above the screen then using the animation you can change the amount it is translated to bring it into place
George S-T
6,624 PointsNothing happens when I do this either.
-WebKit-@keyframes home {
0 {transform:translate(0,-500px)}
100 {transform:translate(0,0)}
}
and
#home {
left:50%;
top:47.5%;
width:680px;
height:300px;
margin-top: -150px;
margin-left: -340px;
-WebKit-animation: home 3s;
}
George S-T
6,624 PointsAdam Sackfield - Please let me know if you don't know how to fix so I can find further help.
3 Answers
bothxp
16,510 PointsWell you're missing the ;'s in:
-webkit-@keyframes home {
0 {top:-50%}
100 {top:47.5%}
}
bothxp
16,510 Pointsbut apart from that I'm not sure ...
Adam Sackfield
Courses Plus Student 19,663 PointsLike this here for for the delay to your earlier message I misssed it. Notice I added forwards to the animation as this will make it stay once its animated rather than disappearing
Adam Sackfield
Courses Plus Student 19,663 PointsCould you please add your replies as comments not answers. You wanted the text to slide in from top. That it what the above link does. Use chrome and you should see it working.
George S-T
6,624 PointsSorry.
I am using Chrome, Im trying to get the #home div which contains a logo and the text to slide in from top. I copied the code from your code pen into my workspace but the animation no longer works.
Adam Sackfield
Courses Plus Student 19,663 PointsThat's something you would need to investigate. You asked how to get the animation working and I have given you a working pen demonstrating how this works. As a web developer you will be expected to solve problems like this all the time. So you should really have a poke around as to why it is working on the codepen I created and not working on your system.
Once you have at least tried to solve this yourself, then post another question to the forum and give detailed information as to what is happening and your code. The forum should be used once you have tried to solve errors on your own.
Good Luck!!
George S-T
6,624 PointsI'm a little confused. My animation doesn't work at all.
Scott Evans
4,236 PointsScott Evans
4,236 PointsAdam Sackfield maybe you might be able to help with this?