Difference between revisions of "MediaWiki:Common.css"
From Cognitive Liberty MediaWiki 1.27.4
| Line 2: | Line 2: | ||
@import url("http://cognitive-liberty.online/wiki/animate.css"); | @import url("http://cognitive-liberty.online/wiki/animate.css"); | ||
.mw-wiki-logo{ | .mw-wiki-logo{ | ||
| − | animation: animationFrames | + | animation: animationFrames ease-in-out 1s; |
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
transform-origin: 50% 50%; | transform-origin: 50% 50%; | ||
animation-fill-mode:forwards; /*when the spec is finished*/ | animation-fill-mode:forwards; /*when the spec is finished*/ | ||
| − | -webkit-animation: animationFrames | + | -webkit-animation: animationFrames ease-in-out 1s; |
-webkit-animation-iteration-count: 1; | -webkit-animation-iteration-count: 1; | ||
-webkit-transform-origin: 50% 50%; | -webkit-transform-origin: 50% 50%; | ||
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ | -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ | ||
| − | -moz-animation: animationFrames | + | -moz-animation: animationFrames ease-in-out 1s; |
-moz-animation-iteration-count: 1; | -moz-animation-iteration-count: 1; | ||
-moz-transform-origin: 50% 50%; | -moz-transform-origin: 50% 50%; | ||
-moz-animation-fill-mode:forwards; /*FF 5+*/ | -moz-animation-fill-mode:forwards; /*FF 5+*/ | ||
| − | -o-animation: animationFrames | + | -o-animation: animationFrames ease-in-out 1s; |
-o-animation-iteration-count: 1; | -o-animation-iteration-count: 1; | ||
-o-transform-origin: 50% 50%; | -o-transform-origin: 50% 50%; | ||
-o-animation-fill-mode:forwards; /*Not implemented yet*/ | -o-animation-fill-mode:forwards; /*Not implemented yet*/ | ||
| − | -ms-animation: animationFrames | + | -ms-animation: animationFrames ease-in-out 1s; |
-ms-animation-iteration-count: 1; | -ms-animation-iteration-count: 1; | ||
-ms-transform-origin: 50% 50%; | -ms-transform-origin: 50% 50%; | ||
| Line 27: | Line 27: | ||
0% { | 0% { | ||
opacity:0; | opacity:0; | ||
| − | transform: translate(500px, | + | transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
22% { | 22% { | ||
| + | opacity:0.36; | ||
| + | transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ; | ||
| + | } | ||
| + | 32% { | ||
opacity:1; | opacity:1; | ||
| − | transform: translate( | + | transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
86% { | 86% { | ||
opacity:1; | opacity:1; | ||
| − | transform: translate(0px, | + | transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
100% { | 100% { | ||
opacity:1; | opacity:1; | ||
| − | transform: translate(0px,0px) ; | + | transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
} | } | ||
| Line 46: | Line 50: | ||
0% { | 0% { | ||
opacity:0; | opacity:0; | ||
| − | -moz-transform: translate(500px, | + | -moz-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
22% { | 22% { | ||
| + | opacity:0.36; | ||
| + | -moz-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ; | ||
| + | } | ||
| + | 32% { | ||
opacity:1; | opacity:1; | ||
| − | -moz-transform: translate( | + | -moz-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
86% { | 86% { | ||
opacity:1; | opacity:1; | ||
| − | -moz-transform: translate(0px, | + | -moz-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
100% { | 100% { | ||
opacity:1; | opacity:1; | ||
| − | -moz-transform: translate(0px,0px) ; | + | -moz-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
} | } | ||
| Line 65: | Line 73: | ||
0% { | 0% { | ||
opacity:0; | opacity:0; | ||
| − | -webkit-transform: translate(500px, | + | -webkit-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
22% { | 22% { | ||
| + | opacity:0.36; | ||
| + | -webkit-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ; | ||
| + | } | ||
| + | 32% { | ||
opacity:1; | opacity:1; | ||
| − | -webkit-transform: translate( | + | -webkit-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
86% { | 86% { | ||
opacity:1; | opacity:1; | ||
| − | -webkit-transform: translate(0px, | + | -webkit-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
100% { | 100% { | ||
opacity:1; | opacity:1; | ||
| − | -webkit-transform: translate(0px,0px) ; | + | -webkit-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
} | } | ||
| Line 84: | Line 96: | ||
0% { | 0% { | ||
opacity:0; | opacity:0; | ||
| − | -o-transform: translate(500px, | + | -o-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
22% { | 22% { | ||
| + | opacity:0.36; | ||
| + | -o-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ; | ||
| + | } | ||
| + | 32% { | ||
opacity:1; | opacity:1; | ||
| − | -o-transform: translate( | + | -o-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
86% { | 86% { | ||
opacity:1; | opacity:1; | ||
| − | -o-transform: translate(0px, | + | -o-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
100% { | 100% { | ||
opacity:1; | opacity:1; | ||
| − | -o-transform: translate(0px,0px) ; | + | -o-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
} | } | ||
| Line 103: | Line 119: | ||
0% { | 0% { | ||
opacity:0; | opacity:0; | ||
| − | -ms-transform: translate(500px, | + | -ms-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
22% { | 22% { | ||
| + | opacity:0.36; | ||
| + | -ms-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ; | ||
| + | } | ||
| + | 32% { | ||
opacity:1; | opacity:1; | ||
| − | -ms-transform: translate( | + | -ms-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
86% { | 86% { | ||
opacity:1; | opacity:1; | ||
| − | -ms-transform: translate(0px, | + | -ms-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
100% { | 100% { | ||
opacity:1; | opacity:1; | ||
| − | -ms-transform: translate(0px,0px) ; | + | -ms-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ; |
} | } | ||
} | } | ||
Revision as of 04:40, 11 November 2018
/* CSS placed here will be applied to all skins */
@import url("http://cognitive-liberty.online/wiki/animate.css");
.mw-wiki-logo{
animation: animationFrames ease-in-out 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease-in-out 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease-in-out 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: animationFrames ease-in-out 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: animationFrames ease-in-out 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
@keyframes animationFrames{
0% {
opacity:0;
transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ;
}
22% {
opacity:0.36;
transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ;
}
32% {
opacity:1;
transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ;
}
86% {
opacity:1;
transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ;
}
100% {
opacity:1;
transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
@-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ;
}
22% {
opacity:0.36;
-moz-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ;
}
32% {
opacity:1;
-moz-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ;
}
86% {
opacity:1;
-moz-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
@-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ;
}
22% {
opacity:0.36;
-webkit-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ;
}
32% {
opacity:1;
-webkit-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ;
}
86% {
opacity:1;
-webkit-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
@-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ;
}
22% {
opacity:0.36;
-o-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ;
}
32% {
opacity:1;
-o-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ;
}
86% {
opacity:1;
-o-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
@-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(500px,-99px) scaleX(1.00) scaleY(1.00) ;
}
22% {
opacity:0.36;
-ms-transform: translate(297px,-47px) scaleX(0.65) scaleY(0.67) ;
}
32% {
opacity:1;
-ms-transform: translate(297px,-47px) scaleX(1.00) scaleY(1.00) ;
}
86% {
opacity:1;
-ms-transform: translate(0px,-47px) scaleX(1.00) scaleY(1.00) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
