Team:Calgary/animation css

svg {

   /* outline: 1px solid transparent; */
   -webkit-backface-visibility: hidden;

}

/* Helix Animation */

.dark-grey {

   fill: #44414d;
   fill-opacity: 1;
   stroke: none;
   stroke-width: 0.03108883px;
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-opacity: 1;

}

.light-grey {

   fill: #5f5b6b;
   fill-opacity: 1;
   stroke: none;
   stroke-width: 0.03108883px;
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-opacity: 1;

}

.dark-green {

   fill: #69b09c;
   fill-opacity: 1;
   stroke: none;
   stroke-width: 0.03108883px;
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-opacity: 1;

}

.light-green {

   fill: #7ccfb8;
   fill-opacity: 1;
   stroke: none;
   stroke-width: 0.02207453px;
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-opacity: 1;

}

@keyframes moveUp {

   0% {
       transform: matrix(1.3829225,0,0,1.3829225,-103.49477,-58.214956);
   }
   50% {
       transform: matrix(1.3829225,0,0,1.3829225,-103.49477,-5.214956);
   }
   100% {
       transform: matrix(1.3829225,0,0,1.3829225,-103.49477,48.214956);
   }

}

@keyframes disappearleft {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(-58px, -38px);
   }
   100% {
       transform: translate(-58px, -38px);
   }

}

@keyframes disappearright {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(58px, -38px);
   }
   100% {
       transform: translate(58px, -38px);
   }

}

@keyframes disappearleftdelay {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(0px, 0px);
   }
   100% {
       transform: translate(-58px, -38px);
   }

}

@keyframes disappearrightdelay {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(0px, 0px);
   }
   100% {
       transform: translate(58px, -38px);
   }

}

@keyframes appearleft {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(58px, -38.5px);
   }
   100% {
       transform: translate(58px, -38.5px);
   }

}

@keyframes appearright {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(-58px, -38.5px);
   }
   100% {
       transform: translate(-58px, -38.5px);
   }

}

@keyframes appearleftdelay {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(0px, 0px);
   }
   100% {
       transform: translate(58px, -38.5px);
   }

}

@keyframes appearrightdelay {

   0% {
       transform: translate(0px, 0px);
   }
   50% {
       transform: translate(0px, 0px);
   }
   100% {
       transform: translate(-58px, -38.5px);
   }

}

.move-up {

   animation: moveUp 2s infinite;
   animation-timing-function: linear;

}

.disappear-left {

   animation: disappearleft 2s infinite;
   animation-timing-function: linear;

}

.disappear-right {

   animation: disappearright 2s infinite;
   animation-timing-function: linear;

}

.disappear-left-delay {

   animation: disappearleftdelay 2s infinite;
   animation-timing-function: linear;

}

.disappear-right-delay {

   animation: disappearrightdelay 2s infinite;
   animation-timing-function: linear;

}

.appear-left {

   animation: appearleft 2s infinite;
   animation-timing-function: linear;

}

.appear-right {

   animation: appearright 2s infinite;
   animation-timing-function: linear;

}

.appear-left-delay {

   animation: appearleftdelay 2s infinite;
   animation-timing-function: linear;

}

.appear-right-delay {

   animation: appearrightdelay 2s infinite;
   animation-timing-function: linear;

}

/* Arrows Animation */

.arrow-v-light-grey {

   opacity: 0.5;
   fill: #000000;
   fill-opacity: 1;
   stroke: #000000;
   stroke-width: 0.51428396;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

.arrow-h-light-grey {

   opacity: 0.5;
   fill: #000000;
   fill-opacity: 1;
   stroke: #000000;
   stroke-width: 59.45217133;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

.box-light-grey {

   opacity: 0.5;
   fill: none;
   fill-opacity: 0.94117647;
   stroke: #000000;
   stroke-width: 1.029;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

.arrow-v-verylight-grey {

   opacity: 0.1;
   fill: #000000;
   fill-opacity: 1;
   stroke: #000000;
   stroke-width: 0.51428396;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

.arrow-h-verylight-grey {

   opacity: 0.1;
   fill: #000000;
   fill-opacity: 1;
   stroke: #000000;
   stroke-width: 59.45217133;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

.box-verylight-grey {

   opacity: 0.1;
   fill: none;
   fill-opacity: 0.94117647;
   stroke: #000000;
   stroke-width: 1.029;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 4;
   stroke-dasharray: none;
   stroke-opacity: 1;
   paint-order: stroke fill markers;

}

@keyframes blinky {

   0% {
       opacity: 0.5;
   }
   25% {
       opacity: 0.1;
   }
   50% {
       opacity: 0.1;
   }
   75% {
       opacity: 0.1;
   }
   100% {
       opacity: 0.5;
   }

}

@keyframes blinkydelay {

   0% {
       opacity: 0.1;
   }
   25% {
       opacity: 0.1;
   }
   50% {
       opacity: 0.5;
   }
   75% {
       opacity: 0.1;
   }
   100% {
       opacity: 0.1;
   }

}

/* @keyframes arrowblinky {

   0% {
       fill: #7ccfb8;
       stroke: #7ccfb8;
   }
   50% {
       fill: #000000;
       stroke: #000000;
   }
   100% {
       fill: #7ccfb8;
       stroke: #7ccfb8;
   }

}

@keyframes arrowblinkydelay {

   0% {
       fill: #000000;
       stroke: #000000;
   }
   50% {
       fill: #7ccfb8;
       stroke: #7ccfb8;
   }
   100% {
       fill: #000000;
       stroke: #000000;
   }

}

@keyframes boxblinky {

   0% {
       stroke: #7ccfb8;
   }
   50% {
       stroke: #000000;
   }
   100% {
       stroke: #7ccfb8;
   }

}

@keyframes boxblinkydelay {

   0% {
       stroke: #000000;
   }
   50% {
       stroke: #7ccfb8;
   }
   100% {
       stroke: #000000;
   }

} */

.blinky {

   animation: blinky 2.5s infinite;
   animation-timing-function: linear;

}

.blinky-delay {

   animation: blinkydelay 2.5s infinite;
   animation-timing-function: linear;

}

/* .arrow-blinky {

   animation: arrowblinky 2.5s infinite;
   animation-timing-function: linear;

}

.arrow-blinky-delay {

   animation: arrowblinkydelay 2.5s infinite;
   animation-timing-function: linear;

}

.box-blinky {

   animation: boxblinky 2.5s infinite;
   animation-timing-function: linear;

}

.box-blinky-delay {

   animation: boxblinkydelay 2.5s infinite;
   animation-timing-function: linear;

} */