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; 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; text-decoration:none !important; } /*Black to Red Black*/

.white-redwhite{ -moz-transition-property: background-image,background-color,color; -moz-transition-duration: 1s; -webkit-transition-property: background-image,background-color,color; -webkit-transition-duration: 1s; -o-transition-property: background-image,background-color,color; -o-transition-duration: 1s; background-image: -moz-linear-gradient(left, #FFF, #FFF); background-image: -webkit-linear-gradient(left, #FFF, #FFF); background-image: -o-linear-gradient(left, #FFF, #FFF); background-color:white; color:black; }

.white-redwhite:hover { -moz-transition-property: background-image,background-color,color; -moz-transition-duration: 1s; -webkit-transition-property: background-image,background-color,color; -webkit-transition-duration: 1s; -o-transition-property: background-image,background-color,color; -o-transition-duration: 1s; background-image: -moz-linear-gradient(left, #FF0000, #FFF); background-image: -webkit-linear-gradient(left, #FF0000, #FFF); background-image: -o-linear-gradient(left, #FF0000, #FFF); background-color:black; 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; vertical-align: middle; background-color: white; color: black; border-radius: 1em; border: solid 0px black; overflow: visible; height: 20px; width: 4%; }

.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; height: 60px; 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, min-width, max-width; -moz-transition-duration: 3s; -webkit-transition-property: width, min-width, max-width; -webkit-transition-duration: 3s; -o-transition-property: width, min-width, max-width; -o-transition-duration: 3s; overflow:hidden; }

.expand:hover { position: relative; -moz-transition-property: width, min-width, max-width; -moz-transition-duration: 3s; -webkit-transition-property: width, min-width, max-width; -webkit-transition-duration: 3s; -o-transition-property: width, min-width, max-width; -o-transition-duration: 3s; }

.ss-master{ }

.ss-master:hover { width: 1000px !important; }

.fly-left { position: absolute; -moz-transition-property: background-color, width, color, left, opacity; -moz-transition-duration: 5s; -webkit-transition-property: background-color, width, color, left, opacity; -webkit-transition-duration: 5s; -o-transition-property: background-color, width, color, left, opacity; -o-transition-duration: 5s; background-color: red; left: 0%; color: black; opacity: 1; width: 10%; }

.fly-left:hover { position: absolute; -moz-transition-property: background-color, width, color, left, opacity; -moz-transition-duration: 5s; -webkit-transition-property: background-color, width, color, left, opacity; -webkit-transition-duration: 5s; -o-transition-property: background-color, width, color, left, opacity; -o-transition-duration: 5s; background-color: red; left: 120%; color: black; opacity: 0; width: 50%; }

-moz-transition-property: background-color, border-color, color, width; -moz-transition-duration: 2s; -webkit-transition-property: background-color, border-color, color, width; -webkit-transition-duration: 2s; -o-transition-property: background-color, border-color, color, width; -o-transition-duration: 2s; background-color: LightSkyBlue; color: DarkSlateGray; border-color: blue; width: 80%; }
 * 1) mini-main {

-moz-transition-property: background-color, border-color, color, width; -moz-transition-duration: 2s; -webkit-transition-property: background-color, border-color, color, width; -webkit-transition-duration: 2s; -o-transition-property: background-color, border-color, color, width; -o-transition-duration: 2s; background-color: black !important; color: gold !important; border-color: gold !important; width: 100% !important; z-index: 80; }
 * 1) mini-main:hover {

-moz-transition-property: background-color, border-color, color, width; -moz-transition-duration: 2s; -webkit-transition-property: background-color, border-color, color, width; -webkit-transition-duration: 2s; -o-transition-property: background-color, border-color, color, width; -o-transition-duration: 2s; background-color: LightSkyBlue; color: DarkSlateGray; border-color: blue; }
 * 1) mini-background {

-moz-transition-property: background-color, border-color, color; -moz-transition-duration: 2s; -webkit-transition-property: background-color, border-color, color; -webkit-transition-duration: 2s; -o-transition-property: background-color, border-color, color; -o-transition-duration: 2s; background-color: black!important; color: Gold!important; border-color: gold !important; } /* * /
 * 1) mini-background:hover {