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: text-shadow, background-color, color; -moz-transition-duration: 1s; -ms-transition-property: text-shadow, background-color, color; -ms-transition-duration: 1s; -webkit-transition-property: text-shadow, background-color, color; -webkit-transition-duration: 1s; -o-transition-property: text-shadow, background-color, color; -o-transition-duration: 1s; text-align: center; background-color: white; color: blue; border-radius: 1em; border: solid 0px black; text-shadow: blue 0px 0px 4px; }

.readmore:hover { position: relative; -moz-transition-property: text-shadow, background-color, color; -moz-transition-duration: 1s; -ms-transition-property: text-shadow, background-color, color; -ms-transition-duration: 1s; -webkit-transition-property: text-shadow, background-color, color; -webkit-transition-duration: 1s; -o-transition-property: text-shadow, background-color, color; -o-transition-duration: 1s; background-color: blue; color: white; text-shadow: white 2px 3px 4px; } /*Black to Red Black*/

.white-redwhite{ -moz-transition-property: background-image,background-color,color; -moz-transition-duration: 1s; -ms-transition-property: background-image,background-color,color; -ms-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: -ms-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; -ms-transition-property: background-image,background-color,color; -ms-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: -ms-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; -ms-transition-property: background-color, color, width, height; -ms-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; -ms-transition-property: background-color, color, width, height; -ms-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; -ms-transition-property: clip, background; -ms-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; -ms-transition-property: clip, background; -ms-transition-duration: 1s; position: absolute; clip: rect(0px, 1000px, 1000px, 0px); }

/*Red Glow*/

.redglow { position: relative; -moz-transition-property: text-shadow; -moz-transition-duration: 1s; -ms-transition-property: text-shadow; -ms-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; -ms-transition-property: text-shadow; -ms-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; -ms-transition-property: width, min-width, max-width; -ms-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; -ms-transition-property: width, min-width, max-width; -ms-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{ -moz-transition-delay: 3s; -ms-transition-delay: 3s; -webkit-transition-delay: 3s; -o-transition-delay: 3s; }

.ss-master:hover { width: 1000px !important; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; -o-transition-delay: 0s; }

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

-moz-transition-property: background-color, border-color, color, box-shadow, width; -moz-transition-duration: 1s; -ms-transition-property: background-color, border-color, color, width, box-shadow; -ms-transition-duration: 1s; -webkit-transition-property: background-color, border-color, width, color, box-shadow; -webkit-transition-duration: 1s; -o-transition-property: background-color, border-color, color, width, box-shadow; -o-transition-duration: 1s; background-color: black !important; color: white !important; border-color: gold !important; width: 100% !important; box-shadow: inset 0 0 1em gold, inset 0 0 2em black, 0 0 2em black; }
 * 1) mini-main:hover {

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

-moz-transition-property: background-color, border-color, color, box-shadow; -moz-transition-duration: 1s; -ms-transition-property: background-color, border-color, color, box-shadow; -ms-transition-duration: 1s; -webkit-transition-property: background-color, border-color, color, box-shadow; -webkit-transition-duration: 1s; -o-transition-property: background-color, border-color, color, box-shadow; -o-transition-duration: 1s; background-color: red !important; color: Gold!important; border-color: gold !important; box-shadow: inset 0 0 1em gold, inset 0 0 2em black, 0 0 2em black; }
 * 1) mini-background:hover {

.transition{ -moz-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -moz-transition-duration: 1s; -ms-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -ms-transition-duration: 1s; -webkit-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -webkit-transition-duration: 1s; -o-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -o-transition-duration: 1s; }

.transition:hover{ -moz-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -moz-transition-duration: 1s; -ms-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -ms-transition-duration: 1s; -webkit-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -webkit-transition-duration: 1s; -o-transition-property: background-color, border-color, color, box-shadow, text-shadow, background-image; -o-transition-duration: 1s; }

.got-milk { -moz-animation-duration: 7s; -webkit-animation-duration: 7s; -o-animation-duration: 7s; -moz-animation-name: fadein; -o-animation-name: fadein; -webkit-animation-name: fadein; } @-moz-keyframes fadein { from { opacity:.0; } to { opacity:1; } } @-webkit-keyframes fadein { from { opacity:.0; } to { opacity:1; } } @-o-keyframes fadein { from { opacity:.0; } to { opacity:1; } } /* * /