Difference between revisions of "Team:Grenoble-Alpes/Microfluidics"

 
(10 intermediate revisions by the same user not shown)
Line 88: Line 88:
 
               transform:rotate(180deg);
 
               transform:rotate(180deg);
 
               z-index:3;
 
               z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
  
 +
              filter: brightness(0.5);
 
                 }
 
                 }
  
Line 132: Line 137:
  
 
.stator_motor:hover .bobine_right {
 
.stator_motor:hover .bobine_right {
−
     -webkit-animation: illuminate 4s linear infinite;
+
     -webkit-animation: illuminate_right 4s linear infinite;
−
     -moz-animation: illuminate 4s linear infinite;
+
     -moz-animation: illuminate_right 4s linear infinite;
−
     animation: illuminate 4s linear infinite;
+
     animation: illuminate_right 4s linear infinite;
 
               }
 
               }
 +
 +
 +
.stator_motor:hover .bobine_bot {
 +
    -webkit-animation: illuminate_bot 4s linear infinite;
 +
    -moz-animation: illuminate_bot 4s linear infinite;
 +
    animation: illuminate_bot 4s linear infinite;
 +
                }
 +
 +
.stator_motor:hover .bobine_left {
 +
    -webkit-animation: illuminate_left 4s linear infinite;
 +
    -moz-animation: illuminate_left 4s linear infinite;
 +
    animation: illuminate_left 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .bobine_top {
 +
    -webkit-animation: illuminate_top 4s linear infinite;
 +
    -moz-animation: illuminate_top 4s linear infinite;
 +
    animation: illuminate_top 4s linear infinite;
 +
              }
 +
  
 
.stator_motor:hover .rotor_motor {
 
.stator_motor:hover .rotor_motor {
Line 142: Line 168:
 
     animation: turn 4s linear infinite;
 
     animation: turn 4s linear infinite;
 
}
 
}
 +
 +
 +
  
 
@-moz-keyframes turn {
 
@-moz-keyframes turn {
Line 158: Line 187:
 
}
 
}
  
−
@-moz-keyframes illuminate {
+
/************ Anim stepper right coal **********/
 +
 
 +
@-moz-keyframes illuminate_right {
 
     0%  {
 
     0%  {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
        filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
−
        -webkit-filter: contrast(0);
+
 
     }
 
     }
−
     25%  {
+
     13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 
         filter: brightness(1);
 
         filter: brightness(1);
−
        filter: contrast(1);
 
 
         -webkit-filter: brightness(1);
 
         -webkit-filter: brightness(1);
−
        -webkit-filter: contrast(1);
 
 
     }
 
     }
 
     50% {
 
     50% {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
         filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
    }
−
         -webkit-filter: contrast(0);
+
    100% {
 +
         filter: brightness(0.5);
 +
         -webkit-filter: brightness(0.5);
 
     }
 
     }
 
}
 
}
  
−
@keyframes illuminate {
+
@keyframes illuminate_right {
 
     0%  {
 
     0%  {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
        filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
−
        -webkit-filter: contrast(0);
+
 
     }
 
     }
−
     25%  {
+
     13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 
         filter: brightness(1);
 
         filter: brightness(1);
−
        filter: contrast(1);
 
 
         -webkit-filter: brightness(1);
 
         -webkit-filter: brightness(1);
−
        -webkit-filter: contrast(1);
 
 
     }
 
     }
 
     50% {
 
     50% {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
         filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
    }
−
         -webkit-filter: contrast(0);
+
    100% {
 +
         filter: brightness(0.5);
 +
         -webkit-filter: brightness(0.5);
 
     }
 
     }
 
}
 
}
  
−
@-webkit-keyframes illuminate {
+
@-webkit-keyframes illuminate_right {
 
     0%  {
 
     0%  {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
        filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
−
        -webkit-filter: contrast(0);
+
 
     }
 
     }
−
     25%  {
+
     13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 
         filter: brightness(1);
 
         filter: brightness(1);
−
        filter: contrast(1);
 
 
         -webkit-filter: brightness(1);
 
         -webkit-filter: brightness(1);
−
        -webkit-filter: contrast(1);
 
 
     }
 
     }
 
     50% {
 
     50% {
−
         filter: brightness(0);
+
         filter: brightness(0.5);
−
         filter: contrast(0);
+
         -webkit-filter: brightness(0.5);
−
         -webkit-filter: brightness(0);
+
    }
−
         -webkit-filter: contrast(0);
+
    100% {
 +
         filter: brightness(0.5);
 +
         -webkit-filter: brightness(0.5);
 
     }
 
     }
 
}
 
}
 +
 +
/************ Anim stepper bot coal **********/
 +
 +
@-moz-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
/************ Anim stepper left coal **********/
 +
 +
@-moz-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
 +
/************ Anim stepper top coal **********/
 +
 +
@-moz-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
  
 
       </style>
 
       </style>

Latest revision as of 08:21, 30 August 2017

Engineering

Microfluidics

Test

Test

Designed by iGEM Grenoble-Alpes 2017 team | Site Map