html{
display: block;
}
body {
padding: 0%;
margin: 0%;
width: 100%;
height: max-content;
overflow: hidden;
display: block;
}
svg{
display: block;
}
#Yellow_car{
animation: Yellow-car-left-to-right 30s linear infinite ;
}
#Magenta_car{
visibility: hidden;
animation: Magenta-car-left-to-right 31.5s linear 15s infinite;
}
#Green_airship{
animation: Green-airship-left-to-right 125s linear infinite;
}
#Pink_airship{
visibility: hidden;
animation: Pink-airship-right-to-left 105s linear 3s infinite;
}
#Orange_car{
visibility: hidden;
animation: Orange-car-right-to-left 38.5s linear 10s infinite;
}
#Pink_car{
visibility: hidden;
animation: Pink-car-right-to-left 31.5s linear 15s infinite;
}
#Blue_bus{
animation: Blue-bus-right-to-left 31.5s linear infinite;
}
#Yellow_carrier_machine{
animation: Yellow-carrier-machine-right-to-left 40s linear infinite ;
}
#Concrete_panels{
animation: Concrete-panel-right-to-left 40s linear infinite ;
}
#Drill_shaft{
animation: Drill-shaft-right-to-left 5s linear infinite alternate;
}
#Dirt_1{
animation: Dirt-left-to-right 20s linear infinite ;
}
#Dirt_2{
animation: Dirt-left-to-right 20s linear 5s infinite ;
}
#Dirt_3{
animation: Dirt-left-to-right 20s linear 10s infinite ;
}
#Bg_city_3{
animation: City3-left-to-right 480s linear 1s infinite;
}
#Bg_city_4{
animation: City4-left-to-right 480s linear 1s infinite;
}
#Bg_city_5{
transform: translateX(-50%) ;
animation: City5-left-to-right 480s linear 1s infinite;
}
/* ドリルのやいば */
#inner_blades{
transform-origin: 307px 514px;
transform: matrix3d(0.31,0,0.95,0,0.00,1,0.00,0,-0.95,0,0.31,0,0,0,0,1) translate(-0.25%);
animation: Rotation 24s linear infinite;
}
#inner_blades_30{
visibility: hidden;
}
#inner_blades_60{
visibility: hidden;
}
#inner_blades_90{
visibility: hidden;
}
#inner_blades_120{
visibility: hidden;
}
#inner_blades_150{
visibility: hidden;
}
/*...................................................................................................
Animation keyframes for footer elements
フッターアニメションのキーフレーム
....................................................................................................
*/
/* 黄色車................................ */
@keyframes Yellow-car-left-to-right{
0%{
transform: translateX(-3%);
}
90%{
transform: translateX(100%);
}
100%{
transform: translateX(100%);
}
}
/* マゼンタ色車.................................... */
@keyframes Magenta-car-left-to-right {
0%{
visibility: visible;
transform: translateX(-8%);
}
88.89%{
transform: translateX(100%);
}
100%{
transform: translateX(100%);
}
}
/* 緑飛行船.......................................... */
@keyframes Green-airship-left-to-right {
0%{
transform: translateX(-5%);
}
95.84%{
transform: translateX(100%);
}
100%{
transform: translateX(100%);
}
}
/* ピンク飛行船......................................................... */
@keyframes Pink-airship-right-to-left {
0%{
visibility: visible;
transform: translateX(4%);
}
95.24%{
transform: translateX(-100%);
}
100%{
transform: translateX(-100%);
}
}
/* オレンジ車...............................................................*/
@keyframes Orange-car-right-to-left {
0%{
visibility: visible;
transform: translateX(17%);
}
90.91%{
transform: translateX(-90%)
}
100%{
transform: translateX(-90%);
}
}
/* ピンク車................................................................ */
@keyframes Pink-car-right-to-left {
0%{
visibility: visible;
transform: translateX(11%);
}
88.89%{
transform: translateX(-93%);
}
100%{
transform: translateX(-93%)
}
}
/* 青いバス ......................................................................*/
@keyframes Blue-bus-right-to-left {
0%{
transform: translateX(7%);
}
88.89%{
transform: translateX(-100%);
}
100%{
transform: translateX(-100%);
}
}
/* 黄色運びマシン............................................................... */
@keyframes Yellow-carrier-machine-right-to-left {
0%{
transform: translateX(13%);
}
37.5%{
transform: translateX(-46%);
}
50%{
transform: translateX(-46%);
}
87.5%{
transform: translateX(13%);
}
100%{
transform: translateX(13%);
}
}
/* コンクリ外板............................................. */
@keyframes Concrete-panel-right-to-left {
0%{
transform: translateX(13%);
}
37.5%{
transform: translateX(-46%);
}
100%{
transform: translateX(-46%);
}
}
/* ドリルピストン円柱............................................... */
@keyframes Drill-shaft-right-to-left {
100%{
transform:translateX(-2.6%);
}
}
/* 瓦礫...................................... */
@keyframes Dirt-left-to-right {
75%{
transform: translateX(48%);
}
100%{
transform: translateX(48%);
}
}
/* 町／ビル3........................... */
@keyframes City3-left-to-right{
33.33%{
transform: translateX(50%);
visibility: hidden;
}
33.34%{
visibility: hidden;
transform: translateX(-100%);
}
66.66%{
transform: translateX(-50%);
}
100%{
transform: translateX(0%);
}
}
/* 町／ビル4........................... */
@keyframes City4-left-to-right{
66.66%{
transform: translateX(100%);
visibility: hidden;
}
66.67%{
visibility: hidden;
transform: translateX(-50%);
}
100%{
transform: translateX(0%);
}
}
/* 町／ビル5......................... */
@keyframes City5-left-to-right{
0%{
visibility: visible;
}
99.5%{
transform: translateX(100%);
visibility: hidden;
}
100%{
transform: translateX(-50%);
visibility: hidden;
}
}
/* ドリル旋回.......................................................................................................................*/
@keyframes Rotation {
0%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,0deg) ;
}
8.33%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-60deg) ;
}
16.66%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-60deg) ;
}
25%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-120deg) ;
}
33.32%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-120deg) ;
}
41.65%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-180deg) ;
}
50%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-180deg) ;
}
58.33%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-240deg) ;
}
66.44%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-240deg) ;
}
75%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-270deg) ;
}
83.33%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-270deg) ;
}
91.63%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-360deg) ;
}
100%{
transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-360deg) ;
}
}
/*--------------------------------------------------------------------------------------------------
Prefixed Animation keyframes declaration for browser preference
---------------------------------------------------------------------------------------------------- */
@-webkit-keyframes Yellow-car-left-to-right{
0%{
-webkit-transform: translateX(-3%);
}
90%{
-webkit-transform: translateX(100%);
}
100%{
-webkit-transform: translateX(100%);
}
}
@-webkit-keyframes Magenta-car-left-to-right {
0%{
visibility: visible;
-webkit-transform: translateX(-8%);
}
88.89%{
-webkit-transform: translateX(100%);
}
100%{
-webkit-transform: translateX(100%);
}
}
@-webkit-keyframes Green-airship-left-to-right {
0%{
-webkit-transform: translateX(-5%);
}
95.84%{
-webkit-transform: translateX(100%);
}
100%{
-webkit-transform: translateX(100%);
}
}
@-webkit-keyframes Pink-airship-right-to-left {
0%{
visibility: visible;
-webkit-transform: translateX(4%);
}
95.24%{
-webkit-transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes Orange-car-right-to-left {
0%{
visibility: visible;
-webkit-transform: translateX(17%);
}
90.91%{
-webkit-transform: translateX(-90%)
}
100%{
-webkit-transform: translateX(-90%);
}
}
@-webkit-keyframes Pink-car-right-to-left {
0%{
visibility: visible;
-webkit-transform: translateX(11%);
}
88.89%{
-webkit-transform: translateX(-93%);
}
100%{
-webkit-transform: translateX(-93%)
}
}
@-webkit-keyframes Blue-bus-right-to-left {
0%{
-webkit-transform: translateX(7%);
}
88.89%{
-webkit-transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes Yellow-carrier-machine-right-to-left {
0%{
-webkit-transform: translateX(13%);
}
37.5%{
-webkit-transform: translateX(-46%);
}
50%{
-webkit-transform: translateX(-46%);
}
87.5%{
-webkit-transform: translateX(13%);
}
100%{
-webkit-transform: translateX(13%);
}
}
@-webkit-keyframes Concrete-panel-right-to-left {
0%{
-webkit-transform: translateX(13%);
}
37.5%{
-webkit-transform: translateX(-46%);
}
100%{
-webkit-transform: translateX(-46%);
}
}
@-webkit-keyframes Drill-shaft-right-to-left {
100%{
-webkit-transform: translateX(-2.5%);
}
}
@-webkit-keyframes Dirt-left-to-right {
75%{
-webkit-transform: translateX(48%);
}
100%{
-webkit-transform: translateX(48%);
}
}
@-webkit-keyframes City3-left-to-right{
33.33%{
-webkit-transform: translateX(50%);
visibility: hidden;
}
33.34%{
visibility: hidden;
-webkit-transform: translateX(-100%);
}
66.66%{
-webkit-transform: translateX(-50%);
}
100%{
-webkit-transform: translateX(0%);
}
}
@-webkit-keyframes City4-left-to-right{
66.66%{
-webkit-transform: translateX(100%);
visibility: hidden;
}
66.67%{
visibility: hidden;
-webkit-transform: translateX(-50%);
}
100%{
-webkit-transform: translateX(0%);
}
}
@-webkit-keyframes City5-left-to-right{
0%{
visibility: visible;
}
99.5%{
-webkit-transform: translateX(100%);
visibility: hidden;
}
100%{
-webkit-transform: translateX(-50%);
visibility: hidden;
}
}
@-webkit-keyframes Rotation {
0%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,0deg) ;
}
8.33%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-60deg) ;
}
16.66%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-60deg) ;
}
25%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-120deg) ;
}
33.32%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-120deg) ;
}
41.65%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-180deg) ;
}
50%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-180deg) ;
}
58.33%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-240deg) ;
}
66.44%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-240deg) ;
}
75%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-270deg) ;
}
83.33%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-270deg) ;
}
91.63%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-360deg) ;
}
100%{
-webkit-transform: matrix3d(0.28,0,0.96,0,0.00,1,0.00,0,-0.96,0,0.28,0,0,0,0,1) translate(-0.25%) rotate3d(0,0,1,-360deg) ;
}
}