aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorErling Aaby <spa440w@gmail.com>2013-04-16 15:12:33 +0200
committerErling Aaby <spa440w@gmail.com>2013-04-16 15:12:33 +0200
commit92389f4ede52a9a69f4c16d50beaa4e1f762eab9 (patch)
treea8ee218044954c7c35c86dcd08d01fb5d93e909c
parentPosititioning animation (diff)
downloadDivid-92389f4ede52a9a69f4c16d50beaa4e1f762eab9.tar.gz
Added webkit, moz, o support for other browsers
-rw-r--r--public/css/divanim.less186
1 files changed, 152 insertions, 34 deletions
diff --git a/public/css/divanim.less b/public/css/divanim.less
index 6760eab..7123052 100644
--- a/public/css/divanim.less
+++ b/public/css/divanim.less
@@ -18,19 +18,34 @@
position: absolute;
width: 100%;
height: 100%;
- -webkit-transform-style: preserve-3d; }
+ -webkit-transform-style: preserve-3d;/*chrome/safari*/
+ -moz-transform-style: preserve-3d; /*mozilla*/
+ -o-transform-style: preserve-3d;/*opera*/ }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 0px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: orbit;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear; }
+ -webkit-transform-style: preserve-3d;/*chrome/safari*/
+ -moz-transform-style: preserve-3d; /*mozilla*/
+ -o-transform-style: preserve-3d;/*opera*/
+
+ -webkit-animation-name: orbit;/*chrome/safari*/
+ -moz-animation-name: orbit;/*mozilla*/
+ -o-animation-name: orbit;/*opera*/
+
+ -webkit-animation-iteration-count: infinite;/*chrome/safari*/
+ -moz-animation-iteration-count: infinite;/*mozilla*/
+ -o-animation-iteration-count: infinite;/*opera*/
+
+ -webkit-animation-timing-function: linear; /*chrome/safari*/
+ -moz-animation-timing-function: linear; /*mozilla*/
+ -o-animation-timing-function: linear;/*opera*/}
.orbit .orbit {
- -webkit-animation-name: suborbit; }
+ -webkit-animation-name: suborbit;/*chrome/safari*/
+ -moz-animation-name: suborbit;/*mozilla*/
+ -o-animation-name: suborbit; /*opera*/ }
.pos {
position: absolute;
top: 50%;
@@ -38,10 +53,22 @@
height: 2em;
margin-top: -1em;
margin-left: -1em;
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: invert;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear; }
+ -webkit-transform-style: preserve-3d;/*chrome/safari*/
+ -moz-transform-style: preserve-3d; /*mozilla*/
+ -o-transform-style: preserve-3d;/*opera*/
+
+ -webkit-animation-name: invert;/*chrome/safari*/
+ -moz-animation-name: invert;/*mozilla*/
+ -o-animation-name: invert;/*opera*/
+
+ -webkit-animation-iteration-count: infinite;/*chrome/safari*/
+ -moz-animation-iteration-count: infinite;/*mozilla*/
+ -o-animation-iteration-count: infinite;/*opera*/
+
+ -webkit-animation-timing-function: linear;/*chrome/safari*/
+ -moz-animation-timing-function: linear; /*mozilla*
+ -o-animation-timing-function: linear;/*opera*/
+ }
#divid, .object, #activity3 .satellitt {
position: absolute;
top: 50%;
@@ -51,7 +78,9 @@
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 10%;
- -webkit-transform-style: preserve-3d; }
+ -webkit-transform-style: preserve-3d;/*chrome/safari*/
+ -moz-transform-style: preserve-3d; /*mozilla*/
+ -o-transform-style: preserve-3d;/*opera*/}
#divid {
/*background-color: #FB7209;*/
background-repeat: no-repeat;
@@ -60,8 +89,14 @@
.object {
background-repeat: no-repeat;
background-size: cover;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear; }
+ -webkit-animation-iteration-count: infinite;/*chrome/safari*/
+ -moz-animation-iteration-count: infinite;/*mozilla*/
+ -o-animation-iteration-count: infinite;/*opera*/
+
+ -webkit-animation-timing-function: linear;/*chrome/safari*/
+ -moz-animation-timing-function: linear;/*mozilla*/
+ -o-animation-timing-function: linear;/*opera*/
+ }
.ring {
position: absolute;
top: 50%;
@@ -132,36 +167,86 @@
0% {
-webkit-transform: rotateZ(0deg); }
100% {
- -webkit-transform: rotateZ(-360deg); } }
+ -webkit-transform: rotateZ(-360deg); }} /**/
+@-moz-keyframes orbit {
+ 0% {
+ -moz-transform: rotateZ(0deg); }
+ 100% {
+ -moz-transform: rotateZ(-360deg); }} /**/
+@-o-keyframes orbit {
+ 0% {
+ -o-transform: rotateZ(0deg); }
+ 100% {
+ -o-transform: rotateZ(-360deg); }} /**/
+
@-webkit-keyframes suborbit {
0% {
-webkit-transform: rotateX(90deg) rotateZ(0deg); }
100% {
- -webkit-transform: rotateX(90deg) rotateZ(-360deg); } }
+ -webkit-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
+@-moz-keyframes suborbit {
+ 0% {
+ -moz-transform: rotateX(90deg) rotateZ(0deg); }
+ 100% {
+ -moz-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
+@-o-keyframes suborbit {
+ 0% {
+ -o-transform: rotateX(90deg) rotateZ(0deg); }
+ 100% {
+ -o-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
+
@-webkit-keyframes invert {
0% {
-webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
- -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
+ -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
+@-moz-keyframes invert {
+ 0% {
+ -moz-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
+ 100% {
+ -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
+@-o-keyframes invert {
+ 0% {
+ -o-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
+ 100% {
+ -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
/* ------------------------scale 3D view----------------------------------------*/
.view-3D.zoom-large #divid {
- -webkit-transform-style: preserve-3d; }
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ }
.view-3D.zoom-large .orbit {
- -webkit-transform-style: preserve-3d; }
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ }
.view-3D #situation {
- -webkit-transform: rotateX(75deg); }
+ -webkit-transform: rotateX(75deg);
+ -moz-transform: rotateX(75deg);
+ -o-transform: rotateX(75deg);
+ }
.view-3D #divid {
- -webkit-transform: rotateX(-90deg); }
+ -webkit-transform: rotateX(-90deg);
+ -moz-transform: rotateX(-90deg);
+ -o-transform: rotateX(-90deg);
+ }
.view-3D .ring {
- -webkit-transform: rotateX(90deg); }
+ -webkit-transform: rotateX(90deg);
+ -moz-transform: rotateX(90deg);
+ -o-transform: rotateX(90deg);
+ }
.view-3D .object,
.view-3D .satellitt {
- -webkit-transform: rotateX(0deg); }
+ -webkit-transform: rotateX(0deg);
+ -moz-transform: rotateX(0deg);
+ -o-transform: rotateX(0deg);
+ }
/* ------------------------zoom----------------------------------------------------------*/
.zoom-large #situation {
width: 100%; }
.zoom-large.view-3D .scale-stretched #situation {
- font-size: 40%; } /*originalstr.62*/
+ font-size: 40%; } /*original size.62*/
.zoom-large.view-3D .scale-d #situation {
font-size: 48%; }
.zoom-large.view-3D .scale-s #situation {
@@ -173,57 +258,90 @@
#activity1 .object,
#activity1.orbit {
/*border: 1px solid black;*/
- -webkit-animation-duration: 6.89016s; }/*2.89016*/
+ -webkit-animation-duration: 6.89016s;
+ -moz-animation-duration: 6.89016s;
+ -o-animation-duration: 6.89016s;
+ }/*2.89016*/
#activity2 .pos,
#activity2 .object,
#activity2.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 8.38237s; }/*7.38237*/
+ -webkit-animation-duration: 8.38237s;
+ -moz-animation-duration: 8.38237s;
+ -o-animation-duration: 8.38237s;
+ }/*7.38237*/
#activity3 .pos,
#activity3 .object,
#activity3.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 11.00021s; }/*12.00021*/
+ -webkit-animation-duration: 11.00021s;
+ -moz-animation-duration: 11.00021s;
+ -o-animation-duration: 11.00021s;
+ }/*12.00021*/
#activity3 .orbit .pos,
#activity3 .orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 0.89764s; }/*0.89764*/
+ -webkit-animation-duration: 0.89764s;
+ -moz-animation-duration: 0.89764s;
+ -o-animation-duration: 0.89764s;
+ }/*0.89764*/
#activity4 .pos,
#activity4 .object,
#activity4.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 13.57017s; }/*22.57017*/
+ -webkit-animation-duration: 13.57017s;
+ -moz-animation-duration: 13.57017s;
+ -o-animation-duration: 13.57017s;
+ }/*22.57017*/
#activity5 .pos,
#activity5 .object,
#activity5.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 17.35138s; }/*142.35138*/
+ -webkit-animation-duration: 17.35138s;
+ -moz-animation-duration: 17.35138s;
+ -o-animation-duration: 17.35138s;
+ }/*142.35138*/
#activity6 .pos,
#activity6 .object,
#activity6.orbit,
#activity6 .ring {
/*border: 1px solid white;*/
- -webkit-animation-duration: 19.36998s; }/*353.36998*/
+ -webkit-animation-duration: 19.36998s;
+ -moz-animation-duration: 19.36998s;
+ -o-animation-duration: 19.36998s;
+ }/*353.36998*/
#activity7 .pos,
#activity7 .object,
#activity7.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 23.20215s; }/*1008.20215*/
+ -webkit-animation-duration: 23.20215s;
+ -moz-animation-duration: 23.20215s;
+ -o-animation-duration: 23.20215s;
+ }/*1008.20215*/
#activity8 .pos,
#activity8 .object,
#activity8.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 27.49584s; }/*1977.49584*/
+ -webkit-animation-duration: 27.49584s;
+ -moz-animation-duration: 27.49584s;
+ -o-animation-duration: 27.49584s;
+ }/*1977.49584*/
#activity9 .pos,
#activity9 .object,
#activity9.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 30.49584s; }/*1977.49584*/
+ -webkit-animation-duration: 30.49584s;
+ -moz-animation-duration: 30.49584s;
+ -o-animation-duration: 30.49584s;
+ }/*1977.49584*/
#activity10 .pos,
#activity10 .object,
#activity10.orbit {
/*border: 1px solid white;*/
- -webkit-animation-duration: 33.49584s; }/*1977.49584*/
+ -webkit-animation-duration: 33.49584s;
+ -moz-animation-duration: 33.49584s;
+ -o-animation-duration: 33.49584s;
+ }/*1977.49584*/
/* --------------------------------activity sizes----------------------------------------*/
/* --------------------------------stretched sizes-------------------------------------------*/
.scale-stretched #divid {