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/

[HELP SEEKER]

hey, you seem to like creating animations..,

wonder if you could come out with animation, that would have flashing or noise making flying or jumping mail box, when the new message or friend request arrives, i have seen it somewhere and maybe cool..

[soaringeagle]

sound cant be done unless u replace it with a flash object what you can do i imagine and habent tried is use the language editor to find the  text that displays the messages waitting  and replace that with an animated gif of a jumping mailbox

youde be lookimg for something new like some code  im not sure what let me see if i can guess

im prertty sure this is what u want

ok heres what to look for <span %1$s>%2$s</span> new replace new with your image code

[soaringeagle]

<span %1$s>%2$s</span> <img src="http://api.ning.com:80/files/d4Ril5vezVJfKtPBnlbGEOCXTmtAwFBEm5XsFaUebFIjNDOnN3ibbjNhesZCpnGXOdMTNntVer65mNHRWtQdAjUgGgnOzxJM/youvegotmail.gif" width="44" height="33" /> ill post as a new tip too

[HELP SEEKER]

have you posted yet? where can i see the demo?

[soaringeagle]

yea i did and u can see it on my site but ofcourse only if logged in and u got mail but it replaces the word new with this graphic

ofcourse iu can use any graphic u want just upload and replace the url

[HELP SEEKER]

need to find some flashing horse image :) hope you enjoy. thanks

[HELP SEEKER]

if you have seen any horse noise making gif, i would surprise the members, at least for a day :)  lol

how do i add noise ?

http://www.horsepresence.com/shop/media/Sounds/22Curiouswhinny2000.wav

http://www.horsepresence.com/shop/media/Sounds/22Loudsuckwhinny2200...

here, found lots tracks :) http://www.horsepresence.com/shop/SoundsHome.html

for one day is OK ?  lol

[soaringeagle]

only way is to use flash not gif

[Armani Rouse]

ok! now this is impressive stuff dude lol I just left your site and you have the blog post kinda come up when you hover over them....how can I do this for the status updates on my site for when a person post a new status...how can I get it where when someone hovers over the status does what your blog post does...thats awesome however you did it!

[soaringeagle]

this is a slightly alr=terd version  i use on my othrr site

just change the electors to apply to anything u want like the activity feed u might have to edit  it a li to fit

this is as i got it on my other site for fory-ums and blogs

.xg_widget_main .module_blog .blogpost:hover,.xg_widget_main .module_forum div.vcard div.topic:hover {border:1px solid #ccc;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;-webkit-box-shadow:6px 6px 10px #ccc;-moz-box-shadow:6px 6px 10px #ccc;box-shadow:6px 6px 10px #ccc;width:535px;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-webkit-transition:all .6s ease-out;-moz-transition:all .6s ease-out;
z-index:999999;background-color:#fff;padding:1em;}

it not only zoomes it rounds the corners as it zoomes

[Armani Rouse]

it defin9itely works for the blogs and fourms, thanks alot bro! but again itd be easier to know exactly what the code looks like to include the status update because when I include div.status-update it does nothing, if you can just provide the code that would create the same effect as the code above for the blogs and forums for the status update, but its working now on my site for blogs and forums its a nice CSS action man, I appreciate that dude, btw hows the trip coming along brother?

[soaringeagle]

thought i sent it put a comma after the viv.status-update,  you may need to remove the width statement, or  after this put just a new

div.status-update {width:250px1important;} or something