diff options
author | Erling Aaby <spa440w@gmail.com> | 2013-04-16 15:12:33 +0200 |
---|---|---|
committer | Erling Aaby <spa440w@gmail.com> | 2013-04-16 15:12:33 +0200 |
commit | 92389f4ede52a9a69f4c16d50beaa4e1f762eab9 (patch) | |
tree | a8ee218044954c7c35c86dcd08d01fb5d93e909c | |
parent | Posititioning animation (diff) | |
download | Divid-92389f4ede52a9a69f4c16d50beaa4e1f762eab9.tar.gz |
Added webkit, moz, o support for other browsers
-rw-r--r-- | public/css/divanim.less | 186 |
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 { |