CSS Room Animated Objects
In short, I tried to insert animations in each object
<div id="room">
<div id="room">
<div id="wrap">
<div id="lamp">
</div>
</div>
<div id="bounce">
</div>
<div id="window">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
<div id="plinth"></div>
<div id="floor">
</div>
</div>
body{
body{
background-color: black;
animation: 20s changing-background infinite;
animation: 20s changing-background infinite;
animation: 20s changing-background infinite;
}
div#room{
background:
repeating-linear-gradient(90deg,
#29303C 0%,#29303C 0.079%,#D7D6D4 0.5%,
#D7D6D4 0.75%,#2D3643 0.9%,
#2D3643 3.67%,#D7D6D4 3%,
#D7D6D4 3.9%,#29303C 4%,
#29303C 3%,transparent 4.5%,transparent 10%) 15px,
radial-gradient(ellipse 25em 15em,#5F87A8 70%,#4D6D88);
background-image: repeating-linear-gradient(90deg,
#29303C 0%,#29303C 0.079%,#D7D6D4 0.5%,
#D7D6D4 0.75%,#2D3643 0.9%,
#2D3643 3.67%,#D7D6D4 3%,
#D7D6D4 3.9%,#29303C 4%,
#29303C 3%,transparent 4.5%,transparent 10%) 15px,
radial-gradient(ellipse 25em 15em,#5F87A8 70%,#4D6D88);
background-color: purple;
border: 1px solid black;
border: 1px solid black;
border: 1px solid black;
min-width: 800px;
width: 80%;
margin: 50px auto;
position: relative;
overflow: hidden;
height: 430px;
z-index: 1;
box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
animation: 8s shake 3;
animation: 8s shake 3;
animation: 8s shake 3;
}
div#wrap{
animation: 8s joggle 3;
animation: 8s joggle 3;
animation: 8s joggle 3;
}
div#lamp{
width: 5px;
height: 140px;
background: hsl(0,3%,70%);
position: relative;
margin: 0px calc(50% - 25px);
margin: 0px calc(50% - 25px);
margin: 0px calc(50% - 25px);
}
div#lamp::after{
content: '';
display: block;
width: 20px;
height: 30px;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
box-shadow: 0px 25px 50px 35px #EEC072;
box-shadow: 0px 25px 50px 35px #EEC072;
box-shadow: 0px 25px 50px 35px #EEC072;
position: absolute;
background: white;
top: 57%;
left: -7px;
z-index: 1;
animation: 2s lighting infinite;
animation: 2s lighting infinite;
animation: 2s lighting infinite;
}
div#lamp::before{
content: '';
display: block;
border: 50px solid transparent;
border: 50px solid transparent;
border: 50px solid transparent;
border: 50px solid transparent;
border-bottom: 50px solid hsl(0,3%,70%);
box-shadow: 0px 10px 10px -7px #FEFFFC;
position: absolute;
left: -47px;
z-index: 2;
}
div#bounce{
width: 80px;
height: 80px;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
background: hsl(0,100%,50%);
position: relative;
top: 48.8%;
left: 44%;
animation: 8s bounce-jump 3;
animation: 8s bounce-jump 3;
animation: 8s bounce-jump 3;
}
div#bounce::before{
content: '';
display: block;
width: 40px;
height: 35px;
background: hsl(0,100%,50%);
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
box-shadow: 5px 4px 1px -4px #ccc;
box-shadow: 5px 4px 1px -4px #ccc;
box-shadow: 5px 4px 1px -4px #ccc;
position: absolute;
left: 33%;
top: 40%;
}
div#bounce::after{
content: '';
display: block;
width: 100%;
position: absolute;
border-radius: 50%/30%;
border-radius: 50%/30%;
border-radius: 50%/30%;
box-shadow: 3px 40px 25px -4px black;
box-shadow: 3px 40px 25px -4px black;
box-shadow: 3px 40px 25px -4px black;
background: transparent;
left: 0%;
top: 60%;
height: 10px;
animation: 8s shadow 3;
animation: 8s shadow 3;
animation: 8s shadow 3;
}
div#window{
width: 150px;
height: 250px;
border: 10px solid hsl(0,50%,22%);
position: relative;
top: -40%;
left: 75%;
background:
linear-gradient(#0A2164,#1F6ED5);
background-image: linear-gradient(#0A2164,#1F6ED5),
linear-gradient(#0A2164,#1F6ED5);
box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
overflow: hidden;
}
div#window::before{
width: 100%;
content: '';
display: block;
position: absolute;
height: 10px;
background: hsl(0,50%,22%);
top: 40%;
z-index: 2;
}
div#window::after{
content: '';
display: block;
position: absolute;
width: 10px;
height: 40%;
background: hsl(0,50%,22%);
z-index: 2;
left: 50%;
}
div#window span{
color: white;
display: block;
position: absolute;
animation: 2s starlight infinite;
animation: 2s starlight infinite;
animation: 2s starlight infinite;
text-shadow: 0px 0px 10px white;
}
div#window span:nth-child(1){
top: 50%;
left: 30%;
}
div#window span:nth-child(2){
top: 20%;
left: 70%;
}
div#window span:nth-child(3){
top: 10%;
left: 15%;
}
div#window span:nth-child(4){
top: 30%;
left: 40%;
}
div#window span:nth-child(5){
top: 10px;
left: -35px;
animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
color: yellow;
}
div#plinth{
background-color: #7D5F54;
width: 100%;
position: absolute;
height: 20px;
top: 84.875%;
z-index: -1;
border-radius: 3px/10px 10px 0px 0px;
border-radius: 3px/10px 10px 0px 0px;
border-radius: 3px/10px 10px 0px 0px;
box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
}
div#floor{
width: 100%;
position: absolute;
height: 45px;
background-color: #EBB366;
background-image: repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%),
repeating-linear-gradient(-45deg,transparent 0%,#D77B30 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,transparent 3.3%);
background-image: repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%),repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%);
z-index: -1;
top: calc(100% - 45px);
top: calc(100% - 45px);
top: calc(100% - 45px);
}
@-moz-keyframes changing-background{
0%{
background: black;
}
20%{
background: hsl(0,0%,5%);
}
40%{
background: hsl(0,0%,10%);
}
60%{
background: hsl(0,0%,3%);
}
70%{
background: hsl(0,0%,6%);
}
70.1%{
background: hsl(0,0%,2%);
}
70.2%{
background: hsl(0,0,15%);
}
100%{
background: black;
}
}
@-webkit-keyframes changing-background{
0%{
background: black;
}
20%{
background: hsl(0,0%,5%);
}
40%{
background: hsl(0,0%,10%);
}
60%{
background: hsl(0,0%,3%);
}
70%{
background: hsl(0,0%,6%);
}
70.1%{
background: hsl(0,0%,2%);
}
70.2%{
background: hsl(0,0,15%);
}
100%{
background: black;
}
}
@keyframes changing-background{
0%{
background: black;
}
20%{
background: hsl(0,0%,5%);
}
40%{
background: hsl(0,0%,10%);
}
60%{
background: hsl(0,0%,3%);
}
70%{
background: hsl(0,0%,6%);
}
70.1%{
background: hsl(0,0%,2%);
}
70.2%{
background: hsl(0,0,15%);
}
100%{
background: black;
}
}
@-moz-keyframes starlight{
0%{
text-shadow: 0px 0px 6px;
}
25%{
text-shadow: 0px 0px 15px;
}
50%{
text-shadow: 0px 0px 10px;
}
75%{
text-shadow: 0px 0px 16px;
}
100%{
text-shadow: 0px 0px 7px;
}
}
@-webkit-keyframes starlight{
0%{
text-shadow: 0px 0px 6px;
}
25%{
text-shadow: 0px 0px 15px;
}
50%{
text-shadow: 0px 0px 10px;
}
75%{
text-shadow: 0px 0px 16px;
}
100%{
text-shadow: 0px 0px 7px;
}
}
@keyframes starlight{
0%{
text-shadow: 0px 0px 6px;
}
25%{
text-shadow: 0px 0px 15px;
}
50%{
text-shadow: 0px 0px 10px;
}
75%{
text-shadow: 0px 0px 16px;
}
100%{
text-shadow: 0px 0px 7px;
}
}
@-moz-keyframes stellae-caducae{
0%{
top: 25px;
left: -35px;
text-shadow: 0px 0px 7px yellow;
}
100%{
top: 150px;
left: 180px;
text-shadow: 0px 0px 10px yellow;
}
}
@-webkit-keyframes stellae-caducae{
0%{
top: 25px;
left: -35px;
text-shadow: 0px 0px 7px yellow;
}
100%{
top: 150px;
left: 180px;
text-shadow: 0px 0px 10px yellow;
}
}
@keyframes stellae-caducae{
0%{
top: 25px;
left: -35px;
text-shadow: 0px 0px 7px yellow;
}
100%{
top: 150px;
left: 180px;
text-shadow: 0px 0px 10px yellow;
}
}
@-moz-keyframes bounce-jump{
0%{
top: 48.8%;
}
10%{
top: -20%;
left: -1%;
}
20%{
top: 48.8%;
left: 30%;
}
25%{
top: 0%;
}
30%{
left: 30%;
}
35%{
top: 48.8%;
}
45%{
top: 0%;
}
50%{
top: 46%;
}
67%{
top: 48.8%;
}
80%{
top: 44%;
}
85%{
top: 48.8%;
}
90%{
top: 42%;
}
95%{
top: 48.8%;
}
100%{
top: 48.8%;
}
}
@-webkit-keyframes bounce-jump{
0%{
top: 48.8%;
}
10%{
top: -20%;
left: -1%;
}
20%{
top: 48.8%;
left: 30%;
}
25%{
top: 0%;
}
30%{
left: 30%;
}
35%{
top: 48.8%;
}
45%{
top: 0%;
}
50%{
top: 46%;
}
67%{
top: 48.8%;
}
80%{
top: 44%;
}
85%{
top: 48.8%;
}
90%{
top: 42%;
}
95%{
top: 48.8%;
}
100%{
top: 48.8%;
}
}
@keyframes bounce-jump{
0%{
top: 48.8%;
}
10%{
top: -20%;
left: -1%;
}
20%{
top: 48.8%;
left: 30%;
}
25%{
top: 0%;
}
30%{
left: 30%;
}
35%{
top: 48.8%;
}
45%{
top: 0%;
}
50%{
top: 46%;
}
67%{
top: 48.8%;
}
80%{
top: 44%;
}
85%{
top: 48.8%;
}
90%{
top: 42%;
}
95%{
top: 48.8%;
}
100%{
top: 48.8%;
}
}
@-moz-keyframes lighting{
0%{
box-shadow: 0px 25px 50px 35px #EEC072;
}
25%{
box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
}
50%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
}
75%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
100%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
}
@-webkit-keyframes lighting{
0%{
box-shadow: 0px 25px 50px 35px #EEC072;
}
25%{
box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
}
50%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
}
75%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
100%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
}
@keyframes lighting{
0%{
box-shadow: 0px 25px 50px 35px #EEC072;
}
25%{
box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
}
50%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
}
75%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
100%{
box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
}
}
@-moz-keyframes joggle{
0%{
margin-left: 0px;
}
25%{
margin-left: 50px;
}
35%{
transform: rotate(13deg);
}
55%{
transform: rotate(-1deg);
}
100%{
margin-left: 0px;
}
}
@-webkit-keyframes joggle{
0%{
margin-left: 0px;
}
25%{
margin-left: 50px;
}
35%{
transform: rotate(13deg);
}
55%{
transform: rotate(-1deg);
}
100%{
margin-left: 0px;
}
}
@keyframes joggle{
0%{
margin-left: 0px;
}
25%{
margin-left: 50px;
}
35%{
transform: rotate(13deg);
}
55%{
transform: rotate(-1deg);
}
100%{
margin-left: 0px;
}
}
@-moz-keyframes shadow{
0%{
box-shadow: 3px 40px 35px -2px black;
}
10%{
box-shadow: 3px 300px 35px 6px black;
}
20%{
box-shadow: 3px 40px 25px -4px black;
}
25%{
box-shadow: 3px 220px 25px 6px black;
}
45%{
box-shadow: 3px 220px 25px 6px black;
}
50%{
box-shadow: 3px 40px 20px -4px black;
}
100%{
box-shadow: 3px 40px 15px -4px black;
}
}
@-webkit-keyframes shadow{
0%{
box-shadow: 3px 40px 35px -2px black;
}
10%{
box-shadow: 3px 300px 35px 6px black;
}
20%{
box-shadow: 3px 40px 25px -4px black;
}
25%{
box-shadow: 3px 220px 25px 6px black;
}
45%{
box-shadow: 3px 220px 25px 6px black;
}
50%{
box-shadow: 3px 40px 20px -4px black;
}
100%{
box-shadow: 3px 40px 15px -4px black;
}
}
@keyframes shadow{
0%{
box-shadow: 3px 40px 35px -2px black;
}
10%{
box-shadow: 3px 300px 35px 6px black;
}
20%{
box-shadow: 3px 40px 25px -4px black;
}
25%{
box-shadow: 3px 220px 25px 6px black;
}
45%{
box-shadow: 3px 220px 25px 6px black;
}
50%{
box-shadow: 3px 40px 20px -4px black;
}
100%{
box-shadow: 3px 40px 15px -4px black;
}
}
@-moz-keyframes shake{
0%{
width: 650px;
transform: scale(1);
}
10%{
margin-left: 93px;
}
12%{
margin-left: 88px;
margin-top: 55px;
}
14%{
margin-top: 45px;
margin-left: 98px;
}
16%{
margin-top: 54px;
margin-left: 89px;
}
18%{
margin-top: 46px;
margin-left: 97px;
}
20%{
margin-top: 50px;
margin-left: 93px;
}
}
@-webkit-keyframes shake{
0%{
width: 650px;
transform: scale(1);
}
10%{
margin-left: 93px;
}
12%{
margin-left: 88px;
margin-top: 55px;
}
14%{
margin-top: 45px;
margin-left: 98px;
}
16%{
margin-top: 54px;
margin-left: 89px;
}
18%{
margin-top: 46px;
margin-left: 97px;
}
20%{
margin-top: 50px;
margin-left: 93px;
}
}
@keyframes shake{
0%{
width: 650px;
transform: scale(1);
}
10%{
margin-left: 93px;
}
12%{
margin-left: 88px;
margin-top: 55px;
}
14%{
margin-top: 45px;
margin-left: 98px;
}
16%{
margin-top: 54px;
margin-left: 89px;
}
18%{
margin-top: 46px;
margin-left: 97px;
}
20%{
margin-top: 50px;
margin-left: 93px;
}
}