CODEWITHSUNDEEP
csscss-transitionscss-transformskeyframe
Simon
Simon

Reputation: 2323

Recreating MS Windows Phone Tiltin Animation in CSS

I am trying to get the "tilt-in" animation working on a little project of mine using CSS animations. Unfortunately I have not been able to port it from the MS Demo where - doubtlessly all the code is there: http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

I'm trying to get the tiles to fade in when the page is loaded, just that part. Once is absolutely fine. I understand that I need to define the vendor keyframes, but my attempts have been so poor that I am not pasting them in my example in jsFiddle:

http://jsfiddle.net/qCQQD/2/

Anyone out there who'll help me out? That would be beyond awesome!

EDIT 1:

a) I'm still trying to get the rotateRight animation running when the page is loaded. I've probably got a hacky version with leftRotate in the .tile class and that removed (and rightRotate added) on pageload.

b) This

.tile:active {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
}

got super slow in Chrome because of the code added, how can I get it back to normal?

I suspect it takes some sort of timeframe from the #tile 

-webkit-transition: 300ms 160ms;

It looks like a slow motion right now. I'm going to try adding something like -webkit-transition: 50ms to it. (yeah I know, total noob).

Upvotes: 2

Views: 2125

Answers (1)

jeschafe
jeschafe

Reputation: 2683

Basically like this. You have it set up fairly correctly, but you just need to actually change some settings. Check this jsfiddle DEMO out.

I'm only using javascript to add a class or remove a class. You could simply do that sort of stuff on a :hover tag in css also it would do the same thing.

I mainly just modified your css to include a rotate(90deg) -webkit-transition. Therefore this will only work in chrome and probably safari. If you want it to work in firefox then you'll have to do the -moz-transition for the rotation.

Upvotes: 5

Related Questions