Question

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?

Answer 1

Apple Developer Website

Webkit.org

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://www.zachstronaut.com/

http://snook.ca/archives/html_and_css/css-text-rotation/

Plenty of links, hope they help and best of luck!