Here is an example .css to change the regions positions. You can move and position the regions freely.

/**
 * Region Definitions.
 */

.region.bottom.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.right {
background : green;
margin-right: 100px;
margin-top: 100px;
}

.region.top.left{
background : red;
margin-left: 100px;
margin-top: 100px;
}

.region.top.center {
background : blue;
*margin-left: 100px;
*margin-top: 100px;
}

.region.bottom.right {
background : green;
margin-right: 100px;
margin-bottom: 100px;
}

.region.bottom.center {
background : blue;
margin-bottom: 100px;
}

.region.bottom.left {
background : red;
margin-left: 100px;
margin-bottom: 100px;
}

.region.third {
background : cyan;
}

.region.middle.center {
background : cyan;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.upper.third {
background : yellow;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.lower.third {
background : magenta;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

@Piranha1605 said in BG Animation with CSS:

Small work accident. The result is a BG animation with CSS only. :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy:

Video on You Tube

html {
cursor : default;
overflow : hidden;
}
body {
margin : 10px;
position : absolute;
width : calc(100% - 20px);
height : calc(100% - 20px);
margin-bottom : -10px;
font-size : 20px;
font-weight : 500;
line-height : 1.5;
color : #FFF;
background : url("bg/bg11.jpg");
width : 100%;
height : 100vh;
background-size : cover;
background-blend-mode : hard-light;
animation : hue-rotate 10s linear infinite;
}
header {
text-align : center;
font-size : 20px;
padding : 8px;
border-radius : 5px;
outline : none;
border : none;
color : #FFF;
text-transform : uppercase;
text-shadow : 0 1px 5px #000;
border : #000 solid 1px;
opacity : 0.7;
box-shadow : 0 8px 6px -6px rgb(0, 0, 0, 0.7);
border-top : 1px solid rgb(255, 255, 255, 0.8) !important ;
}
.dimmed {
color : #FFF;
}
.normal {
color : #FFF;
}
.bright {
color : #FFF;
}
.module {
font-size : 20px;
padding : 8px;
font-weight : 400;
border-radius : 5px;
box-shadow : 4px 6px 10px -4px rgb(0, 0, 0, 0.3) inset, 0 1px 1px -1px rgb(255, 255, 255, 0.3);
background : rgb(0, 0, 0, 0.2);
outline : none;
border : none;
border : black solid 1px;
color : #6E6E6E;
text-shadow : 0 1px 5px #000;
}
@keyframes hue-rotate {
from {
filter : hue-rotate(0);
}
to {
filter : hue-rotate(360deg);
}
} 

@sdetweil

I just tested it in the living room. It runs smoothly if you set the time to 5s. The problem is now the discussion with my wife why I now work on the large TV in the living room every evening. :)

You Tube Video
TV
Samsung GQ75Q60RGT

@lavolp3
I will adapt it further and then add it to the module. The arrangement of the modules will be resolved via the config. What I will do is install the day and night switches that change the designs.

@sdetweil Tomorrow I will test all the monitors in the house with it. It runs smoothly on the Pi and on the laptop. I have not yet tried it on the TV.

Small work accident. The result is a BG animation with CSS only. :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy:

Video on You Tube

body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #606060;
  background: url("bg/bg7.jpg");
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 10s linear infinite;
          animation: hue-rotate 10s linear infinite;
  
}

html {
  cursor: default;
  overflow: hidden;
  background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
}

header {
  text-align: center;
  font-size: 20px;
  padding:8px;
  border-radius: 5px;
  outline: none;
  border: none;
  background-image: linear-gradient(#28D2DE 0%, #1A878F 100%);
  color: #FFF;
  text-transform: uppercase;
  text-shadow: #000 0px 1px 5px;
  border: 1px solid #000;
  opacity: 0.7;
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.8) !important;

}
.dimmed {
  color: #FFF;
}

.normal {
  color: #FFF;
}

.bright {
  color: #FFF;
}
 .module {
  font-size: 20px; 
  padding:8px;
  font-weight: 400;
  border-radius: 5px;
  box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  outline: none;
  border: none;
  border: 1px solid black;
  color: #6E6E6E;
  text-shadow: #000 0px 1px 5px;

}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

Download the zip file from codepen and load everything with MMM-iFrame or with my MMM-Watchstore.

Do you mean it

All of this is now also available as modules.

https://forum.magicmirror.builders/topic/13158/mmm-fast-css

A small module with various clocks.

github Link

  {
  	module: "MMM-Watchstore",
  	position: "top_center",
  		config: {
  			url: "modules/MMM-Watchstore/clocks/clock1/index.html",
  			width: "500px",
  			height: "120px",
  	}
  },

To change the clock, change the entry clock1 / clock2 …