MediaWiki:Wikia.css/transitions

/* * / /**/ /* Transition Effects */ /**/ /* Use these like any other css class. To request a fade effect contact The Excel please specify Properties involved durations and values for those properties if needed you will be asked to clarify.

/*Fading Effects*/

/*Read More Improvements*/

.readmore { position: relative; -moz-transition-property: background-color, color; -moz-transition-duration: 1s; -webkit-transition-property: background-color, color; -webkit-transition-duration: 1s; -o-transition-property: background-color, color; -o-transition-duration: 1s; text-align: center; background-color: white; color: blue; -moz-border-radius: 1em; border-radius: 1em; border: solid 0px black; }

.readmore:hover { position: relative; -moz-transition-property: background-color, color; -moz-transition-duration: 1s; -webkit-transition-property: background-color, color; -webkit-transition-duration: 1s; -o-transition-property: background-color, color; -o-transition-duration: 1s; background-color: blue; color: white; }

/*Other*/

/*Big Red Boom*/

.bigredboom { position: relative; -moz-transition-property: background-color, color, width, height; -moz-transition-duration: 1s; -webkit-transition-property: background-color, color, width, height; -webkit-transition-duration: 1s; -o-transition-property: background-color, color, width, height; -o-transition-duration: 1s; text-align: center; background-color: white; color: black; -moz-border-radius: 1em; border-radius: 1em; border: solid 0px black; width: 15%; }

.bigredboom:hover { position: relative; -moz-transition-property: background-color, color, width, height; -moz-transition-duration: 1s; -webkit-transition-property: background-color, color, width, height; -webkit-transition-duration: 1s; -o-transition-property: background-color, color, width, height; -o-transition-duration: 1s; background-color: red; color: white; width: 100%; }

/*Hidden Changing*/

.hide-unhide { position: relative; } .hide-unhide div { -moz-transition-property: clip, background; -moz-transition-duration: 1s; -webkit-transition-property: clip, background; -webkit-transition-duration: 1s; -o-transition-property: clip, background; -o-transition-duration: 1s; position: absolute; overflow: hidden; font-weight: normal; font-size: small; clip: rect(0px, 1000px, 0px, 0px); background: transparent; } .hide-unhide:hover div { -moz-transition-property: clip, background; -moz-transition-duration: 2s; -webkit-transition-property: clip, background; -webkit-transition-duration: 2s; -o-transition-property: clip, background; -o-transition-duration: 2s; position: absolute; clip: rect(0px, 1000px, 1000px, 0px); }

/*Red Glow*/

.redglow { position: relative; -moz-transition-property: text-shadow; -moz-transition-duration: 1s; -webkit-transition-property: text-shadow; -webkit-transition-duration: 1s; -o-transition-property: text-shadow; -o-transition-duration: 1s; text-shadow: none; }

.redglow:hover { position: relative; -moz-transition-property: text-shadow; -moz-transition-duration: 1s; -webkit-transition-property: text-shadow; -webkit-transition-duration: 1s; -o-transition-property: text-shadow; -o-transition-duration: 1s; text-shadow: red 0px 0px 2px; }

/*Expand*/

.expand { position: relative; -moz-transition-property: width; -moz-transition-duration: 2s; -webkit-transition-property: width; -webkit-transition-duration: 2s; -o-transition-property: width; -o-transition-duration: 2s; overflow:hidden;

}

.expand:hover { position: relative; -moz-transition-property: width; -moz-transition-duration: 2s; -webkit-transition-property: width; -webkit-transition-duration: 2s; -o-transition-property: width; -o-transition-duration: 2s; }

.ss-51-214 { width: 51px; }

.ss-51-214:hover { width: 214px; }

.ss-88-165 { width: 88px; }

.ss-88-165:hover { width: 165px; }

.ss-90-165 { width: 90px; }

.ss-90-165:hover { width: 165px; }

.ss-master{ width: 0%; }

.ss-master:hover { width: 100%; }

/* * /