MediaWiki:Common.css/rotate.css
Zur Navigation springen
Zur Suche springen
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/* CSS placed here will be applied to all skins */
.blink_me { animation: mymove 3s linear 5; }
@keyframes mymove { 50% { opacity: 0; } }
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove { 50% { opacity: 0; } }
@-moz-keyframes mymove { 50% { opacity: 0; } }
/* https://code-boxx.com/css-blinking-animation/ */
@keyframes blinking { 0% { color: #ff3d50; } 100% { color: #222291; } }
@-webkit-keyframes blinking { 0% { color: #ff3d50; } 100% { color: #222291; } }
@-moz-keyframes blinking { 0% { color: #ff3d50; } 100% { color: #222291; } }
.blinking {
animation: blinking 3s 10; /* funktioniert auch auf der Seite */
}
@keyframes ausein { 0% { visibility: hidden; color: #fff; } 100% { visibility: visible; color: initial; } }
@-webkit-keyframes ausein { 0% { visibility: hidden; color: #fff; } 100% { visibility: visible; color: initial; } }
@-moz-keyframes ausein { 0% { visibility: hidden; color: #fff; } 100% { visibility: visible; color: initial; } }
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
@-moz-keyframes blink { 50% { color: transparent; } }
.blink {
animation: blink 3s 10; -webkit-animation: blink 3s 10; -moz-animation: blink 3s 10;
border: 2px dashed pink;
}
@keyframes blinken { 50% { visibility: hidden; } }
@-moz-keyframes blinken { 50% { visibility: hidden; } }
@-webkit-keyframes blinken { 50% { visibility: hidden; } }
.blinken {
animation: blinken 3s 10; -webkit-animation: blinken 3s 10; -moz-animation: blinken 3s 10;
border: 2px dotted green;
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@keyframes fadeInh { 0% { opacity: 0; } 100% { opacity: 0.7; } }
@-webkit-keyframes fadeInh { 0% { opacity: 0; } 100% { opacity: 0.7; } }
.fadeInh { -webkit-animation-name: fadeInh; animation-name: fadeInh; }
@keyframes fromTop { 0% { top: -500px; visibility: visible; } 100% { top: 0; visibility: visible; } }
@-webkit-keyframes fromTop { 0% { top: -500px; visibility: visible; } 100% { top: 0; visibility: visible; } }
@-moz-keyframes fromTop { 0% { top: -500px; visibility: visible; } 100% { top: 0; visibility: visible; } }
@keyframes fallen { from { transform: rotate(0) translateX(0); opacity: 1; }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; }
to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
@-webkit-keyframes fallen { from { transform: rotate(0) translateX(0); opacity: 1; }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; }
to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
@-moz-keyframes fallen { from { transform: rotate(0) translateX(0); opacity: 1; }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; }
to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
.fallen {
animation: fallen 3s 10; -webkit-animation: fallen 3s 10; -moz-animation: fallen 3s 10;
-webkit-animation-fill-mode: forwards; -webkit-transform-origin: left center; -webkit-animation-delay: 20s;
-moz-animation-fill-mode: forwards; -moz-transform-origin: left center; -moz-animation-delay: 20s;
animation-fill-mode: forwards; transform-origin: left center; animation-delay: 20s;
border: 2px dotted green;
}
@keyframes fall { from, 15% { transform: rotate(0) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.07,2.02,.67,.57); }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.13,.84,.82,1); }
85%, to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
@-moz-keyframes fall { from, 15% { transform: rotate(0) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.07,2.02,.67,.57); }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.13,.84,.82,1); }
85%, to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
@-webkit-keyframes fall { from, 15% { transform: rotate(0) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.07,2.02,.67,.57); }
50%, 60% { transform: rotate(90deg) translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.13,.84,.82,1); }
85%, to { transform: rotate(90deg) translateX(200px); opacity: 0; } }
.fall {
animation: fall 3s 10; -webkit-animation: fall 3s 10; -moz-animation: fall 3s 10;
-webkit-animation-fill-mode: forwards; -webkit-transform-origin: left center; -webkit-animation-delay: 20s;
-moz-animation-fill-mode: forwards; -moz-transform-origin: left center; -moz-animation-delay: 20s;
animation-fill-mode: forwards; transform-origin: left center; animation-delay: 20s;
border: 2px dotted orange;
}
@keyframes rotY { 50% { transform: rotateY(90deg) } }
@-webkit-keyframes rotY { 50% { transform: rotateY(90deg) } }
@-moz-keyframes rotY { 50% { transform: rotateY(90deg) } }
@keyframes rotmove { 0% { transform: rotateY(0deg) translateY(-600px); visibility: hidden; opacity: 0; color: #f0f; }
10% { transform: rotateY(90deg) translateY(-540px); visibility: visible; opacity: 0.5; }
40% { transform: rotateY(0deg) translateY(-360px); opacity: 0.8; }
70% { transform: rotateY(90deg) translateY(-180px); opacity: 1; }
99% { color: #f0f }
100% { transform: rotateY(0deg) translateY(0px); opacity: 1; visibility: visible; color: rgb(80, 109, 44) }
}
@-webkit-keyframes rotmove { 0% { transform: rotateY(0deg) translateY(-600px); visibility: hidden; opacity: 0; color: #f0f; }
10% { transform: rotateY(90deg) translateY(-540px); visibility: visible; opacity: 0.5; }
40% { transform: rotateY(0deg) translateY(-360px); opacity: 0.8; }
70% { transform: rotateY(90deg) translateY(-180px); opacity: 1; }
99% { color: #f0f }
100% { transform: rotateY(0deg) translateY(0px); opacity: 1; visibility: visible; color: rgb(80, 109, 44) }
}
@-moz-keyframes rotmove { 0% { transform: rotateY(0deg) translateY(-600px); visibility: hidden; opacity: 0; color: #f0f; }
10% { transform: rotateY(90deg) translateY(-540px); visibility: visible; opacity: 0.5; }
40% { transform: rotateY(0deg) translateY(-360px); opacity: 0.8; }
70% { transform: rotateY(90deg) translateY(-180px); opacity: 1; }
99% { color: #f0f }
100% { transform: rotateY(0deg) translateY(0px); opacity: 1; visibility: visible; color: rgb(80, 109, 44) }
}
.rotmove { margin: 0.3em; visibility: hidden;
animation: rotmove 8s 1; animation-delay: 15s; animation-fill-mode: forwards; animation-timing-function: linear;
-webkit-animation: rotmove 8s 1; -webkit-animation-delay: 10s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: linear;
-moz-animation: rotmove 8s 1; -moz-animation-delay: 10s; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: linear;
}
.rotmove:hover {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused; -moz-animation-play-state: paused;
}
.rotmove:active, .rotmove:focus {
-webkit-animation-play-state: initial; /* Safari 4.0 - 8.0 */
animation-play-state: initial; -moz-animation-play-state: initial;
}
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover { animation: bounce 1s; -webkit-animation: bounce 1s; -moz-animation: bounce 1s; -o-animation: bounce 1s; }
@keyframes drehwurm { from { transform: rotate(0deg); opacity: 1 }
50% { opacity: 0; }
to { transform: rotate(360deg); opacity: 1 } }
@-webkit-keyframes drehwurm { from { transform: rotate(0deg); opacity: 1 }
50% { opacity: 0; }
to { transform: rotate(360deg); opacity: 1 } }
@-moz-keyframes drehwurm { from { transform: rotate(0deg); opacity: 1 }
50% { opacity: 0; }
to { transform: rotate(360deg); opacity: 1 } }
.drehwurm:hover { animation: drehwurm 3s infinite; animation-timing-function: linear;
animation-delay: 3s; -webkit-animation-delay: 3s; -moz-animation-delay: 3s;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
-webkit-animation: drehwurm 3s infinite; -webkit-animation-timing-function: linear;
-moz-animation: drehwurm 3s infinite; -moz-animation-timing-function: linear;
}
.drehwurm:active {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
cursor: pointer;
}
.mysvg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.01 -.01 2.02 2.02' version='1.1' %3E%3Crect width='1' height='1' fill='none' stroke='green' stroke-width='0.01' /%3E%3Ccircle r='1' fill='none' stroke='blue' stroke-width='0.01' x='1' y='1'/%3E%3C/svg%3E");
width: 100px; height: 100px; border: 1px dotted grey;
}
/* HOME http://nicolasgallagher.com/pure-css-gui-icons/demo/
------------------------------------------------------------------------------------------------------------------------------- */
.home:before {
left:1px;
border-style:solid;
border-color:transparent;
border-width:8px 7px;
border-bottom-color:#c55500;
margin-top:-16px;
background:transparent;
}
.home::after {
left:3px;
width:2px;
height:4px;
border-style:solid;
border-color:#c55500 #c55500 transparent;
border-width:3px 4px 0;
margin-top:0;
background:transparent;
}
.home:hover:before,
.home:focus:before,
.home:active:before {
border-bottom-color:#730800;
background:transparent;
}
.home:hover::after,
.home:focus::after,
.home:active::after {
border-color:#730800 #730800 transparent;
}
/* 5zackiger Stern https://pixeltuner.de/css3-formen/
--------------------------------------------------------
style="color: coral; border-bottom-color: coral;"
color und border-bottom-color in der gewünschten Farbe einfärben
*/
#stari { margin: 50px 0; position: relative; display: block; color: inherit; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom-width: 70px; border-bottom-style: solid; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); }
#stari:before { border-bottom-width: 80px; border-bottom-style: solid; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }
#stari::after { position: absolute; display: block; color: inherit; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom-width: 70px; border-bottom-style: solid; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }
/* 3D Bouncing ball */
#ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 35%; margin-left: -70px; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 5s linear 0s; -moz-transition: all 5s linear 0s; -o-transition: all 5s linear 0s; -ms-transition: all 5s linear 0s; transition: all 5s linear 0s; cursor: pointer; }#ballWrapper:active { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); cursor: pointer; }
#ball {
width: 140px;
height: 140px;
border-radius: 70px;
background: rgb(187,187,187);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%, rgba(119,119,119,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1)));
background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777',GradientType=0 );
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4),
0 0 1px #000;
position: absolute;
top: 0;
z-index: 11;
-webkit-animation: jump 1s infinite;
-moz-animation: jump 1s infinite;
-o-animation: jump 1s infinite;
-ms-animation: jump 1s infinite;
animation: jump 1s infinite;
cursor: pointer;
}
#ball::after {
content: "";
width: 80px;
height: 40px;
position: absolute;
left: 30px;
top: 10px;
z-index: 10;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(232,232,232,1) 1%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 );
border-radius: 40px / 20px;
}
#ballShadow { position: absolute; left: 50%; bottom: 0; z-index: 10; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -webkit-transform: scaleY(.3); -moz-transform: scaleY(.3); transform: scaleY(.3); -webkit-animation: shrink 1s infinite; -moz-animation: shrink 1s infinite; animation: shrink 1s infinite;
}
/* Animations */
@-webkit-keyframes jump { 0% { top: 0; -webkit-animation-timing-function: ease-in; }
40% { }
50% { top: 140px; height: 140px; -webkit-animation-timing-function: ease-out; }
55% { top: 160px; height: 120px; border-radius: 70px / 60px; -webkit-animation-timing-function: ease-in; }
65% { top: 120px; height: 140px; border-radius: 70px; -webkit-animation-timing-function: ease-out; }
95% { top: 0; -webkit-animation-timing-function: ease-in; }
100% { top: 0; -webkit-animation-timing-function: ease-in; }
}
@-moz-keyframes jump { 0% { top: 0; -moz-animation-timing-function: ease-in; }
40% { }
50% { top: 140px; height: 140px; -moz-animation-timing-function: ease-out; }
55% { top: 160px; height: 120px; border-radius: 70px / 60px; -moz-animation-timing-function: ease-in; }
65% { top: 120px; height: 140px; border-radius: 70px; -moz-animation-timing-function: ease-out; }
95% { top: 0; -moz-animation-timing-function: ease-in; }
100% { top: 0; -moz-animation-timing-function: ease-in; }
}
@keyframes jump { 0% { top: 0; animation-timing-function: ease-in; }
50% { top: 140px; height: 140px; animation-timing-function: ease-out; }
55% { top: 160px; height: 120px; border-radius: 70px / 60px; animation-timing-function: ease-in; }
65% { top: 120px; height: 140px; border-radius: 70px; animation-timing-function: ease-out; }
95% { top: 0; animation-timing-function: ease-in; }
100% { top: 0; animation-timing-function: ease-in; }
}
@-webkit-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -webkit-animation-timing-function: ease-in; }
50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; -webkit-animation-timing-function: ease-out; }
100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -webkit-animation-timing-function: ease-in; }
}
@-moz-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -moz-animation-timing-function: ease-in; }
50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; -moz-animation-timing-function: ease-out; }
100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -moz-animation-timing-function: ease-in; }
}
@keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; animation-timing-function: ease-in; }
50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; animation-timing-function: ease-out; }
100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; animation-timing-function: ease-in; }
}