SmartMirror-Projektarbeit/modules/MMM-DynamicWeather/MMM-DynamicWeather.css

.MMM-DynamicWeather .flake-downwards {
  position: absolute;
  top: -50px;
  animation-name: flake-downwards;
  animation-iteration-count: infinite;
}

.MMM-DynamicWeather .flake-upwards {
  position: absolute;
  top: -50px;
  animation-name: flake-upwards;
  animation-iteration-count: infinite;
}

.MMM-DynamicWeather .flake-right-left {
  position: absolute;
  animation-name: flake-right-left;
  animation-iteration-count: infinite;
}

.MMM-DynamicWeather .flake-left-right {
  position: absolute;
  animation-name: flake-left-right;
  animation-iteration-count: infinite;
}

.MMM-DynamicWeather *[class|="flake"] div {
  width: 20px;
  height: 20px;

  background-repeat: no-repeat;
  background-size: contain;
  animation-iteration-count: infinite;
}

/* Animate opacity */
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes flake-downwards {
  from {
    transform: translateY(0vh);
  }
  to {
    transform: translateY(100vh);
  }
}

@keyframes flake-upwards {
  from {
    transform: translateY(calc(100vh + 20px));
  }
  to {
    transform: translateY(0vh);
  }
}

@keyframes flake-left-right {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(calc(100vw + 60px));
  }
}

@keyframes flake-right-left {
  from {
    transform: translateX(calc(100vw + 60px));
  }
  to {
    transform: translateX(0vw);
  }
}

@keyframes flake-jiggle {
  0% {
    transform: translateX(0vw);
  }
  20% {
    transform: translateX(20vw);
  }
  30% {
    transform: translateX(5vw);
  }
  50% {
    transform: translateX(25vw);
  }
  70% {
    transform: translateX(0vw);
  }
  85% {
    transform: translateX(15vw);
  }
  100% {
    transform: translateX(0vw);
  }
}
@keyframes flake-jiggle-left-right {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
@keyframes flake-jiggle-right-left {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-150vw);
  }
}

/********************
RAIN CSS
*********************/

.MMM-DynamicWeather .rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.MMM-DynamicWeather .rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

.MMM-DynamicWeather div.back-row-toggle .rain.back-row {
  display: block;
}

.MMM-DynamicWeather .drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.MMM-DynamicWeather .stem {
  width: 3px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/******************************
Clouds
https://codepen.io/Mark_Bowley/pen/xEbuI
******************************/

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

/* OBJECTS */

.MMM-DynamicWeather .cloud {
  opacity: 0.5;
  background: #fff;
  background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1));
  background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

  height: 120px;
  position: relative;
  width: 350px;
}

.MMM-DynamicWeather .cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.MMM-DynamicWeather .cloud:after {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.MMM-DynamicWeather .cloud:before {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;

  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}
/***************************
Fog 
https://codepen.io/Ravyre/pen/gXawyY
***************************/

/* ---------- Fog ---------- */
.MMM-DynamicWeather .fogwrapper {
  height: 150%;
  position: absolute;
  top: -150px;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
.MMM-DynamicWeather #foglayer_01,
.MMM-DynamicWeather #foglayer_02,
.MMM-DynamicWeather #foglayer_03 {
  height: 150%;
  position: absolute;
  width: 500%;
  top: -150px;
}
.MMM-DynamicWeather #foglayer_01 .image01,
.MMM-DynamicWeather #foglayer_01 .image02,
.MMM-DynamicWeather #foglayer_02 .image01,
.MMM-DynamicWeather #foglayer_02 .image02,
.MMM-DynamicWeather #foglayer_03 .image01,
.MMM-DynamicWeather #foglayer_03 .image02 {
  float: left;
  height: 150%;
  top: -150px;
  width: 100%;
}
.MMM-DynamicWeather #foglayer_01,
.MMM-DynamicWeather #foglayer_02,
.MMM-DynamicWeather #foglayer_03 {
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 10s linear infinite;
}

.MMM-DynamicWeather #foglayer_01 .image01,
.MMM-DynamicWeather #foglayer_01 .image02 {
  background: url("images/fog1.png") center center/cover no-repeat transparent;
}
.MMM-DynamicWeather #foglayer_02 .image01,
.MMM-DynamicWeather #foglayer_02 .image02,
.MMM-DynamicWeather #foglayer_03 .image01,
.MMM-DynamicWeather #foglayer_03 .image02 {
  background: url("images/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@keyframes foglayer_01_opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
/* ---------- Keyframe moveMe ---------- */
@keyframes foglayer_moveme {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

/***************************
Lightning
***************************/
.MMM-DynamicWeather .lightningPlayer {
  height: 100%;
  position: absolute;
  top: -10px;
  left: 0px;
  width: 100%;
  display: block;
}
.MMM-DynamicWeather .lightning1 {
  height: 100%;
  position: absolute;
  top: -10px;
  left: 0px;
  width: 100%;
  background: url("images/lightning1.png") center center/cover no-repeat transparent;
  animation: lightning1_opacity 14s linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.MMM-DynamicWeather .lightning2 {
  height: 100%;
  position: absolute;
  top: -10px;
  left: 0px;
  width: 100%;
  background: url("images/lightning2.png") center center/cover no-repeat transparent;
  animation: lightning2_opacity 14s linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
@keyframes lightningPlayer_opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lightning1_opacity {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lightning2_opacity {
  0% {
    opacity: 0;
  }
  19% {
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  25% {
    opacity: 0;
  }
  59% {
    opacity: 0;
  }
  60% {
    opacity: 0.8;
  }
  65% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/***************************
Sunny
***************************/
.MMM-DynamicWeather .sunnyPlayer {
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  opacity: .4;
}
.MMM-DynamicWeather .sun {
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: .4;
}

/***************************
Snowman
***************************/
.MMM-DynamicWeather .snowman {
  width: 350px !important;
  bottom: 20px;
  left: 25%;
  position: absolute;
  display: block;
  height: 100px !important;
  background: url("images/SNOWMAN_1.png") center center/cover no-repeat transparent;
  animation: snowmanBg linear;
  animation-fill-mode: forwards;
  animation-duration: 60;
  /* animation-delay: 10s; */
}
@keyframes snowmanBg {
  0% {
    background-image: url("images/SNOWMAN_1.png");
    height: 100px;
  }
  10% {
    background-image: url("images/SNOWMAN_1.png");
    height: 100px;
  }
  20% {
    background-image: url("images/SNOWMAN_2.png");
    height: 200px;
  }
  30% {
    background-image: url("images/SNOWMAN_3.png");
    height: 300px;
  }
  40% {
    background-image: url("images/SNOWMAN_4.png");
    height: 375px;
  }
  50% {
    background-image: url("images/SNOWMAN_5.png");
    height: 450px;
  }
  60% {
    background-image: url("images/SNOWMAN_6.png");
    height: 600px;
  }
  70% {
    background-image: url("images/SNOWMAN_7.png");
    height: 625px;
  }
  80% {
    background-image: url("images/SNOWMAN_8.png");
    height: 625px;
  }
  90% {
    background-image: url("images/SNOWMAN_9.png");
    height: 650px;
  }
  100% {
    background-image: url("images/SNOWMAN_9.png");
    height: 650px;
  }
}

/***************************
Flower
***************************/
.MMM-DynamicWeather .flower {
  width: 400px !important;
  bottom: 20px;
  left: 25%;
  position: absolute;
  display: block;
  height: 250px !important;
  background: url("images/FLOWER_1.png") center center/cover no-repeat transparent;
  animation: flowerBg linear;
  animation-fill-mode: forwards;
  animation-delay: 10s;
}
@keyframes flowerBg {
  0%, 10% {
    background-image: url("images/FLOWER_1.png");
    height: 250px;
  }
  20% {
    background-image: url("images/FLOWER_2.png");
    height: 350px;
  }
  30% {
    background-image: url("images/FLOWER_3.png");
    height: 400px;
  }
  40% {
    background-image: url("images/FLOWER_4.png");
    height: 450px;
  }
  50% {
    background-image: url("images/FLOWER_5.png");
    height: 500px;
  }
  60% {
    background-image: url("images/FLOWER_6.png");
    height: 600px;
  }
  70% {
    background-image: url("images/FLOWER_7.png");
    height: 650px;
  }
  80%, 100% {
    background-image: url("images/FLOWER_8.png");
    height: 650px;
  }
}