updated and enhanced 2 sweet css animations that work together

[soaringeagle]

dave h designed a new banner for my site  which is perfect btw  and inspired me to tweak  the 2 animations i had on the banner, and site description (probly doesnt work in ie)

what i had b4

the banner would tilt 1 way as the site description flew in from the right (skewing to addto the speed effect) as it passed center the banner would rock back tilting the other way

then the site description skewed the other way bouncing back towards center

with the new banner i added a new keyframe that then transitions the site description to the top of the banner overlapping slightly

code i'll add in 2 parts 1st is the site description  code

#xg_sitedesc {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 3.5s;
    -moz-animation-duration: 3.5s;
    -ms-animation-duration: 3.5s;
    -o-animation-duration: 3.5s;
    animation-duration: 3.5s;
    animation-delay:12s;
    -moz-animation-delay:12s;
    -ms-animation-delay:12s;
    -o-animation-delay:12s;
    -webkit-animation-delay:12s;

}



@-webkit-keyframes zoomin {
    0% { -webkit-transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { -webkit-transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

@-moz-keyframes zoomin {
    0% { -moz-transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { -moz-transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -moz-transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

@-ms-keyframes zoomin {
    0% { -ms-transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { -ms-transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100%{ -ms-transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

@-o-keyframes zoomin {
    0% { -o-transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { -o-transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -o-transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

@keyframes zoomin {
    0% { transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

#xg_sitedesc {
    -webkit-animation-name: zoomin;
    -moz-animation-name: zoomin;
    -ms-animation-name: zoomin;
    -o-animation-name: zoomin;
    animation-name: zoomin;

    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

depending on banner size u may bneed to adjust the transitiony - number remember - is up possitive down

this  assumes your site description is centeres as default

now the banner code

this code i wrote a lil more efficiently i havent gotten around to converting the other to shorthand yet

@keyframes logowobble {
    0%, 100% {transform:
    skew(0deg,0deg);}
    25% {transform:skew(5deg,-7deg);}
    75% {transform:skew(-7deg,5deg);}
}
@-moz-keyframes logowobble {
    0%, 100% {-moz-transform:
    skew(0deg,0deg);}
    25% {-moz-transform:skew(5deg,-7deg);}
    75% {-moz-transform:skew(-7deg,5deg);}
}
@-webkit-keyframes logowobble {
    0%, 100% {-webkit-transform:
    skew(0deg,0deg);}
    25% {-webkit-transform:skew(5deg,-7deg);}
    75% {-webkit-transform:skew(-7deg,5deg);}
}
@-ms-keyframes logowobble {
    0%, 100% {-ms-transform:
    skew(0deg,0deg);}
    25% {-ms-transform:skew(5deg,-7deg);}
    75% {-ms-transform:skew(-7deg,5deg);}
}
@-o-keyframes logowobble {
    0%, 100% {-o-transform:
    skew(0deg,0deg);}
    25% {-o-transform:skew(5deg,-7deg);}
    75% {-o-transform:skew(-7deg,5deg);}
}
h1#xg_sitename.xj_site_name a#application_name_header_link img{animation:logowobble 3s 12s ease-in-out;
-moz-animation:logowobble 3s 12s ease-in-out;
-ms-animation:logowobble 3s 12s ease-in-out;
-o-animation:logowobble 3s 12s ease-in-out;
-webkit-animation:logowobble 3s 12s ease-in-out;}

feel free to totaly customize it and alter it any way you want but post your creative alterations for all to see

see it and other fun cs animations here www.dreadlockssite.com/main/

[soaringeagle]

i tweaked it a tad more the banner he made  the text reflection  fell below the background into a transparent area so  i adjusted the div so the watery like reflection  overlapped the header outset border  for a beat]utiful draped over it like effect

and had the desc almost touch the navigation but 50% of its over the logo too

[George H. Compton IV]

I checked it out works perfectly but I have a small logo picture and it pushes to the Right Of my lowest tab.. I can put a bigger Logo and it Stays at the bottom but that's not our site's logo do you have a code to correct my problem LOL awesome job though thank you :-)

[soaringeagle]

pushes as in moves sideways the logo should "wobble"  tilt 1 way then the other  you can remove the whole logowobble animation and only use the ite desc fly in or u can rewite the wobble code the skew 5 deg -7deg parts which give it a lil twist as it wobbles i can look at your site and try to come up with a custom one fir ya  if its not too involved cause b=next few days busy packing for a trip then will be off in the woods fir a few weeks

lets see your url and i'll try to come up with something

but if i do ill be writting it by what id expect the results to be and then would have to test it and refine it

whats the url is it active now?

[soaringeagle]

okkk i think i see what u mean  was the logo centered b4?  or do u mean the desc  was to the left now its too far right

(centered)

edit eaxchy 1 of these

@keyframes zoomin {
    0% { transform: translateX(30%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-30%) skewX(30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    97% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translatey(-90px) skewX(0deg); opacity: 1; }
}

0%  it starts at 30% to the right of its default position and invisible

next slides left to 30%  past center

then returb=ns to 0 centered

u can try diferent cvalues (remember to change all -webkit- -ms- -o- etc to match)

try

30%

-65%

-25%

-25%

so it ends up more under the logo

i think u removed the translatey which then makes it fly upwards?

[George H. Compton IV]

thank you I'll give it a shot tomorrow and add it to my stylesheet you are awesome :)

[soaringeagle]

if u run into trouble let me know  let me explain the keyframes concept

0% can be replaced with the word from

100% can be replaced with to

so you have the from point 0% and to point 100%  then you define keyframes it passes through

if say you want  25% and 75% to be the same you can say 25%, 75%

so say you want from and to to be centerded 25 and 75 ti be right and 50% to be left

youd write it simular to

from, to {translatex : (0%);}

25%, 75% {translatex: (20%);}

50% {translatex: (-20%);}

you can also  use translate: (x,y) to have it move up down left right at the same time

the % ofcourse defines the posu]ition it should be in at that % through the duration of time u defined

u can use percentages or px when defining motion

when defining durations and delays you can use s for econds or ms for miliseconds

im only scratching the surface of what u can do im jut learning it myself

i hope this lil animation for dummies explanation helps you understand how it works so its easier to edit and maybe in the future write your own

believe it or not  i only have been playing with animations for 2 weeks now and already writting them practically on autopilot  then just tweaking them to perfection

[dave]

I take my hat off, Great work :-)

[soaringeagle]

haha i just have fun with it i tweaked mine a lil more so it added a lil transparency back after  shooting up to the top and had a very slight slide to the right as it goes up

[Tyler Durbin]

Who is Dave H? I need a logo for another site I am working on and yours looks great!

[soaringeagle]

he removed the h i guess dave   http://creators.ning.com/profile/daveh

[dave]

Still here, and love you all :-), Just plain Dave sounded better lol :-)

[dave]

what sought of logo would you like, send me a personal mail and let me know :-)