I can use follow css code to do some simple animation, but I want do more advanced:
opacity: 1;
-webkit-transition-property: opacity, linear;
-webkit-transition-duration: 2s, 4s;
I want the div from opacity: 0 to opacity 1. Also, I want the position is move from x, y to x , y+10 Lastly, I want the div become invisible, so, I want down the opacity 1 to 0.
How can I do that? Or it is not possible to do these complex animation in CSS?
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
It is certainly possible, but I don't know in which context you want it. I use it for hovers on links and such, they work very nicely.
And I tip (this example rotation):
-moz-transform: rotate(180deg); transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
You can do these tricks on many browsers, not just Safari.
http://snook.ca/archives/html_and_css/css-text-rotation/
Plenty of links, hope they help and best of luck!