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 ease-out 0.8s; | ||
+ | animation-iteration-count: 1; | ||
+ | transform-origin: 50% 50%; | ||
+ | animation-fill-mode:forwards; /*when the spec is finished*/ | ||
+ | -webkit-animation: animationFrames ease-out 0.8s; | ||
+ | -webkit-animation-iteration-count: 1; | ||
+ | -webkit-transform-origin: 50% 50%; | ||
+ | -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ | ||
+ | -moz-animation: animationFrames ease-out 0.8s; | ||
+ | -moz-animation-iteration-count: 1; | ||
+ | -moz-transform-origin: 50% 50%; | ||
+ | -moz-animation-fill-mode:forwards; /*FF 5+*/ | ||
+ | -o-animation: animationFrames ease-out 0.8s; | ||
+ | -o-animation-iteration-count: 1; | ||
+ | -o-transform-origin: 50% 50%; | ||
+ | -o-animation-fill-mode:forwards; /*Not implemented yet*/ | ||
+ | -ms-animation: animationFrames ease-out 0.8s; | ||
+ | -ms-animation-iteration-count: 1; | ||
+ | -ms-transform-origin: 50% 50%; | ||
+ | -ms-animation-fill-mode:forwards; /*IE 10+*/ | ||
+ | } | ||
+ | @keyframes animationFrames{ | ||
+ | 0% { | ||
+ | opacity:0; | ||
+ | transform: translate(300px,0px) skewX(-30deg) ; | ||
+ | } | ||
+ | 60% { | ||
+ | opacity:1; | ||
+ | transform: translate(-40px,0px) skewX(30deg) ; | ||
+ | } | ||
+ | 80% { | ||
+ | opacity:1; | ||
+ | transform: translate(0px,0px) skewX(-15deg) ; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity:1; | ||
+ | transform: translate(0px,0px) skewX(0deg) ; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes animationFrames{ | ||
+ | 0% { | ||
+ | opacity:0; | ||
+ | -moz-transform: translate(300px,0px) skewX(-30deg) ; | ||
+ | } | ||
+ | 60% { | ||
+ | opacity:1; | ||
+ | -moz-transform: translate(-40px,0px) skewX(30deg) ; | ||
+ | } | ||
+ | 80% { | ||
+ | opacity:1; | ||
+ | -moz-transform: translate(0px,0px) skewX(-15deg) ; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity:1; | ||
+ | -moz-transform: translate(0px,0px) skewX(0deg) ; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes animationFrames { | ||
+ | 0% { | ||
+ | opacity:0; | ||
+ | -webkit-transform: translate(300px,0px) skewX(-30deg) ; | ||
+ | } | ||
+ | 60% { | ||
+ | opacity:1; | ||
+ | -webkit-transform: translate(-40px,0px) skewX(30deg) ; | ||
+ | } | ||
+ | 80% { | ||
+ | opacity:1; | ||
+ | -webkit-transform: translate(0px,0px) skewX(-15deg) ; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity:1; | ||
+ | -webkit-transform: translate(0px,0px) skewX(0deg) ; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-o-keyframes animationFrames { | ||
+ | 0% { | ||
+ | opacity:0; | ||
+ | -o-transform: translate(300px,0px) skewX(-30deg) ; | ||
+ | } | ||
+ | 60% { | ||
+ | opacity:1; | ||
+ | -o-transform: translate(-40px,0px) skewX(30deg) ; | ||
+ | } | ||
+ | 80% { | ||
+ | opacity:1; | ||
+ | -o-transform: translate(0px,0px) skewX(-15deg) ; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity:1; | ||
+ | -o-transform: translate(0px,0px) skewX(0deg) ; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-ms-keyframes animationFrames { | ||
+ | 0% { | ||
+ | opacity:0; | ||
+ | -ms-transform: translate(300px,0px) skewX(-30deg) ; | ||
+ | } | ||
+ | 60% { | ||
+ | opacity:1; | ||
+ | -ms-transform: translate(-40px,0px) skewX(30deg) ; | ||
+ | } | ||
+ | 80% { | ||
+ | opacity:1; | ||
+ | -ms-transform: translate(0px,0px) skewX(-15deg) ; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity:1; | ||
+ | -ms-transform: translate(0px,0px) skewX(0deg) ; | ||
+ | } | ||
} | } |
Revision as of 04:31, 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-out 0.8s; animation-iteration-count: 1; transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/ -webkit-animation: animationFrames ease-out 0.8s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: animationFrames ease-out 0.8s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode:forwards; /*FF 5+*/ -o-animation: animationFrames ease-out 0.8s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -o-animation-fill-mode:forwards; /*Not implemented yet*/ -ms-animation: animationFrames ease-out 0.8s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode:forwards; /*IE 10+*/ } @keyframes animationFrames{ 0% { opacity:0; transform: translate(300px,0px) skewX(-30deg) ; } 60% { opacity:1; transform: translate(-40px,0px) skewX(30deg) ; } 80% { opacity:1; transform: translate(0px,0px) skewX(-15deg) ; } 100% { opacity:1; transform: translate(0px,0px) skewX(0deg) ; } } @-moz-keyframes animationFrames{ 0% { opacity:0; -moz-transform: translate(300px,0px) skewX(-30deg) ; } 60% { opacity:1; -moz-transform: translate(-40px,0px) skewX(30deg) ; } 80% { opacity:1; -moz-transform: translate(0px,0px) skewX(-15deg) ; } 100% { opacity:1; -moz-transform: translate(0px,0px) skewX(0deg) ; } } @-webkit-keyframes animationFrames { 0% { opacity:0; -webkit-transform: translate(300px,0px) skewX(-30deg) ; } 60% { opacity:1; -webkit-transform: translate(-40px,0px) skewX(30deg) ; } 80% { opacity:1; -webkit-transform: translate(0px,0px) skewX(-15deg) ; } 100% { opacity:1; -webkit-transform: translate(0px,0px) skewX(0deg) ; } } @-o-keyframes animationFrames { 0% { opacity:0; -o-transform: translate(300px,0px) skewX(-30deg) ; } 60% { opacity:1; -o-transform: translate(-40px,0px) skewX(30deg) ; } 80% { opacity:1; -o-transform: translate(0px,0px) skewX(-15deg) ; } 100% { opacity:1; -o-transform: translate(0px,0px) skewX(0deg) ; } } @-ms-keyframes animationFrames { 0% { opacity:0; -ms-transform: translate(300px,0px) skewX(-30deg) ; } 60% { opacity:1; -ms-transform: translate(-40px,0px) skewX(30deg) ; } 80% { opacity:1; -ms-transform: translate(0px,0px) skewX(-15deg) ; } 100% { opacity:1; -ms-transform: translate(0px,0px) skewX(0deg) ; } }