Develop Reference

Two animation, both forwards

I have a Div with the id of center. I set the opacity of the Div to 0 in CSS file. when the window loads, I give the Div an animation:
document.getElementById('center').style.animation = "UP 1s forwards";
if the user click a button, I change the animation to:
document.getElementById('center').style.animation = "DOWN 1s forwards";
Problem: the second animation doesn't show up, the Div suddenly disappear.

A example fiddle or some more code might help. Lot of things could be wrong.
Your keyframes for the down animation might be starting with opacity 0;
You need to set some position property in CSS to use top/right/bottom/left properties. Check that.
There might be something wrong with the JS on click.
Just some things I can think of.
It feels like a toast animation by what you described. Here's a fiddle.
https://jsfiddle.net/thelessergeek/rj7a06hm/
Hopefully you were looking for that. My JS might be a little sad. Work it out as you see fit. Thanks!

Can I cancel a css hover pseudo or force webkit to check for hovering?

The best current example I have of this problem is here: http://lukes.comyr.com/Tf2MarketThing/index.html
On Safari, when you hover over an item it activates the css hover pseudo, which is a webkit transform:
.item:hover {
-webkit-transform: scale(1.5) rotate(30deg);
}
However, if you click on the item it moves (via jQuery animate()), but it still remains in the hover animation/state even though the mouse is not over the item, and in order to get rid of the hover pseudo you have to hover over the item again where it has moved.
Is there a way to fix this problem so that the item is in the normal css state after it moves? I was wondering if any of these methods might exist:
Force browser to recalculate hover boundaries
Reset or remove the pseudo item class
Simulate a mouse move event to trigger the hover calculations
Edit: Pathetically, the link seems to be overloaded now so heres a couple of screenshots to help illustrate the problem:
This here is what the item looks like when you hover over it, notice how it's rotated compared to the other elements
This is what the item looks like after it moves, which is still rotated in the hover pseudo, even though the cursor hasn't moved from it's original position (Where the gap is in the upper right corner)

It's not full solution , but just trying to give you idea how to solve it
$('.item').click(function(){$(this).css('transform','scale(1)')})
$('.item').hover(function(){$(this).css('transform','scale(1.5)')})
$('.item').mouseout(function(){$(this).css('transform','scale(1)')})

:not(:hover) not working with opacity

I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help

skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations

Simply added a class on hover, and removed the class on mouse off.

Drop down menu cut-off after SlideOut

I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.

Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.

$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.

how to stop CSS animation without javascript

This is the jsFiddle. What I would like is stop the box when it reaches its end position. I know there is a transition function available also but that does not seem to work. Are all animation functions type also available for transition? I am using rotate function in my actual work.

Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).
I've updated the fiddle: http://jsfiddle.net/nTG42/2/
More information is provide by the MDN: https://developer.mozilla.org/en/css/css_animations

Remove the infinite from animation:mymove infinite; and set the final place as top:200px. Demo