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!
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
Maria Cuan
4,500 Pointsrocking animation
Hello everyone, thank you for your help in everything :) I once again must ask your advice on a css animation. I can't find the reason why my boat is not rocking back and forth.
.rocking { -webkit-animation-name: Rocking; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: Rocking; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; }
@webkit-keyframes Rocking{ from { -webkit-transform: rotate(0deg); } 70% { -webkit-transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); } }
My html is basically:
<object type="image/svg+xml" data="img/boat-01.svg" class="boat floating rocking">
<!-- fallback image in CSS -->
</object>
11 Answers
Alex Lasek
11,536 Pointsto play the animation backward and forward you should add and set up animation-direction:alternate-reverse if it needs to go forth and then back the value will be just alternate
cheers
Maria Cuan
4,500 PointsWell I was looking for my boat to rotate a little (-5deg) and its not doing it :(
Alex Lasek
11,536 Pointsthere are 2 things you can do so simulate boat moving back and forth. One is rotate it -5 deg and then +5deg, but it wouldn't be smooth.
@-webkit-keyframes Rocking /* Safari and Chrome */
{
from { -webkit-transform: rotate(0deg); }
33% { -webkit-transform: rotate(-5deg); }
66% { -webkit-transform: rotate(0deg); }
to {-webkit-transform: rotate(5deg); }
}
Except for that they added move on Y (translateY(-10px)) that's why the animation looks like the boat moving back and forth
@-webkit-keyframes Rocking /* Safari and Chrome */
{
50% { -webkit-transform: rotate(-5deg) translateY(-10px);
}
hope that helps,
cheers
Maria Cuan
4,500 PointsOh wow, thanks :) Any idea on why my scrollbar is gone? o_o
Alex Lasek
11,536 Pointshmm scrollbar? where should it be?
Maria Cuan
4,500 Pointswhen you resize my page to a smaller resolution, all my elements stack. But you cannot scroll downwards to see the bottom ones. Is it because my background is fixed?
Alex Lasek
11,536 Pointsthis is what I see after resize the browser https://dl.dropboxusercontent.com/u/83685159/small.png
and honestly speaking, I have no idea, what scrollbar you are talking about :)
Maria Cuan
4,500 PointsIf you just push your window up so you overlay content, there is no way to scroll around to see it. :(
Alex Lasek
11,536 Pointsohh, you mean in on codepen. It's because of the styling the window. The body of your page is default set up to overlay:hidden;
http://codepen.io/anon/pen/apCnD
hope, I got your point :)
Maria Cuan
4,500 PointsOh I can scroll now! But not in my index.html Let me show you a screenshot. Thank you for your patience :)
https://www.dropbox.com/s/rptlcg76m4hjes7/Esther_Cuan_Design___Web.jpg
Alex Lasek
11,536 PointsLOL, sorry I had no idea, that you are talking about the navigation button ;/
Anyway, it won't work on codepen, as it is right now. To load the page properly all your links have to be absolute, uploaded somewhere on the Internet.
that's why any js action or external css styling won't be executed or applied.
cheers
Maria Cuan
4,500 PointsThank you so much for all your help and patience! Alex