CodePen Embed - Sunny to Cloudy - CSS illustration, GSAP animation

<div class="container">
  <div class="chimney"></div>
  <div class="roof"></div>
  <div class="roof2"></div>
  <div class="roof3"></div>
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="column3"></div>
  <div class="column4"></div>
  <div class="house-body"></div>
  <div class="foundation"></div>
  <div class="porch-floor"></div>
  <div class="doorframe"></div>
  <div class="door"></div>
  <div class="door-rectangle1"></div>
  <div class="door-rectangle2"></div>
  <div class="door-rectangle3"></div>
  <div class="door-rectangle4"></div>
  <div class="doorknob"></div>
  <div class="lamp-stem"></div>
  <div class="lamp-body"></div>
  <div class="lamp-bulb"></div>
  <div class="windowframe1"></div>
  <div class="window1"></div>
  <div class="windowframe2"></div>
  <div class="window2"></div>
  <div class="mushroom"></div>
  <div class="tree"></div>
  <div class="tree-trunk"></div>
  <div class="plant-pot"></div>
  <div class="cactus"></div>
  <div class="cloud1"></div>
  <div class="cloud2"></div>
  <div class="cloud3"></div>
</div>
<p style="font-family:arial"><a href="https://i.pinimg.com/564x/26/1d/b1/261db113f6007d0d54e37affba48b9db.jpg?b=t">Illustration model</a>

body {
   background-color: #86bec3;
   display: flex;
   align-content: center;
   justify-content: center;
}
.container {
  height: 640px;
  min-width: 900px;
  position: relative;
}

.grass {
  position: absolute;
  width: 100%;
  height: 100px;   
  left:0;
  right:0;
  bottom:0;
  background-color: #345900;
  box-shadow: inset -50px -50px 50px 10px #253f00;
  z-index: 1;
}
.chimney {
  position: absolute;
  width: 75px;
  height: 480px;   
  left: 18.7%;
  transform: translate(-50%);
  bottom: 20%;
  /*background-color: #854012;
  box-shadow: inset -25px -10px 0 10px #763910;*/
  background-image: url("https://image.flaticon.com/icons/svg/222/222649.svg");
  z-index: 1;
}
.roof {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 66%;
  border-bottom: 125px solid #424552;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	width: 675px;
  z-index: 3;
}
.roof2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 61.4%;
  border-bottom: 30px solid #4d515f;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	width: 723px;
  z-index: 3;
}
.roof3 {
  position: absolute;
  width: 700px;
  height: 12px;   
  left: 50%;
  background-color: #e9f9ff;
  transform: translate(-50%);
  bottom: 59.5%;
	width: 723px;
  z-index: 3;
}
.column1 {
  position: absolute;
  left: 15%;
  transform: translate(-50%);
  bottom: 14.2%;
  border-bottom: 290px solid #fffcef;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 20px;
  z-index: 3;
}
.column2 {
  position: absolute;
  left: 37%;
  transform: translate(-50%);
  bottom: 14.2%;
  border-bottom: 290px solid #fffcef;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 20px;
  z-index: 3;
}
.column3 {
  position: absolute;
  left: 63%;
  transform: translate(-50%);
  bottom: 14.2%;
  border-bottom: 290px solid #fffcef;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 20px;
  z-index: 3;
}
.column4 {
  position: absolute;
  left: 85%;
  transform: translate(-50%);
  bottom: 14.2%;
  border-bottom: 290px solid #fffcef;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 20px;
  z-index: 3;
}
.house-body {
  position: absolute;
  width: 550px;
  height: 350px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 18%;
  background-color: #ebd6b1;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23e2c696' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 2;
}
.foundation {
  position: absolute;
  width: 660px;
  height: 50px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 6.4%;
  background-color: #686b72;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='32' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%2352565d' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 3
}
.porch-floor {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 14.2%;
  border-bottom: 40px solid #ebebeb;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	width: 550px;
  z-index: 2;
}
.doorframe {
  position: absolute;
  width: 140px;
  height: 210px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 20.5%;
  background-color: #fffcef;
  box-shadow: inset -10px -0 0 0 #f2ebcf;
  z-index: 3;
}
.door {
  position: absolute;
  width: 120px;
  height: 200px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 20.5%;
  background-color: #405512;
  z-index: 4;
}
.door-rectangle1 {
  position: absolute;
  width: 20px;
  height: 58px;   
  left: 47.3%;
  transform: translate(-50%);
  bottom: 37%;
  background-color: #405512;
  border: 9px solid #37490f;
  z-index: 4;
}
.door-rectangle2 {
  position: absolute;
  width: 20px;
  height: 58px;   
  left: 52.5%;
  transform: translate(-50%);
  bottom: 37%;
  background-color: #405512;
  border: 9px solid #37490f;
  z-index: 4;
}
.door-rectangle3 {
  position: absolute;
  width: 20px;
  height: 58px;   
  left: 47.3%;
  transform: translate(-50%);
  bottom: 23%;
  background-color: #405512;
  border: 9px solid #37490f;
  z-index: 4;
}
.door-rectangle4 {
  position: absolute;
  width: 20px;
  height: 58px;   
  left: 52.5%;
  transform: translate(-50%);
  bottom: 23%;
  background-color: #405512;
  border: 9px solid #37490f;
  z-index: 4;
}
.doorknob {
  position: absolute;
  width: 14px;
  height: 14px;   
  left: 45%;
  transform: translate(-50%);
  bottom: 34.5%;
  background-color: #999998;
  border-radius: 50%;
  box-shadow: inset -2px -3px 0 3px #81847b;
  z-index: 5;
}
.lamp-stem {
  position: absolute;
  width: 5px;
  height: 30px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 54.7%;
  background-color: #282828;
  z-index: 4;
}
.lamp-body {
  position: absolute;
  width: 30px;
  height: 30px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 50%;
  background-color: #ffd632;
  border-radius: 90% 90% 10% 10%;
  box-shadow: inset -3px -3px 0 3px #ffa11a;
  z-index: 4;
}
.lamp-bulb {
  position: absolute;
  width: 10px;
  height: 14px;   
  left: 50%;
  transform: translate(-50%);
  bottom: 51.5%;
  background-color: #ffdd56;
  border-radius: 50%;
  z-index: 5;
}
.windowframe1 {
  position: absolute;
  width: 100px;
  height: 110px;   
  left: 28%;
  transform: translate(-50%);
  bottom: 33%;
  background-color: #fffcef;
  box-shadow: inset -10px 0 0 0 #f2ebcf;
  z-index: 3;
}
.window1 {
  position: absolute;
  width: 80px;
  height: 90px;   
  left: 28%;
  transform: translate(-50%);
  bottom: 34.6%;
  background-color: #adcecf;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a0c2c3' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 4;
}
.windowframe2 {
  position: absolute;
  width: 100px;
  height: 110px;   
  left: 72%;
  transform: translate(-50%);
  bottom: 33%;
  background-color: #fffcef;
  box-shadow: inset -10px -0 0 0 #f2ebcf;
  z-index: 3;
}
.window2 {
  position: absolute;
  width: 80px;
  height: 90px;   
  left: 72%;
  transform: translate(-50%);
  bottom: 34.6%;
  background-color: #adcecf;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a0c2c3' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 4;
}
.mushroom {
  position: absolute;
  width: 20px;
  height: 20px;   
  left: 20%;
  transform: translate(-50%);
  bottom: 5%;
  background-image: url("https://image.flaticon.com/icons/svg/138/138509.svg");
  z-index: 5;
}
/*.tree1 {
  position: absolute;
  width: 350px;
  height: 350px;   
  left: 85.8%;
  transform: translate(-50%);
  bottom: 9%;
  background-image: url("https://image.flaticon.com/icons/svg/616/616541.svg");
  z-index: 1;
}*/
/*.plant1 {
  position: absolute;
  width: 450px;
  height: 500px;   
  left: 46%;
  transform: translate(-50%);
  transform: scale(0.15, 0.15);
  bottom: -18%;
  background-image: url("https://image.flaticon.com/icons/svg/1483/1483755.svg");
  z-index: 5;
}*/
.tree {
  position: absolute;
  width: 120px;
  height: 140px;   
  left: 84%;
  bottom: 34.5%;
  background-color: #659419;
  border-radius: 50%;
  box-shadow: inset -10px -10px 0 3px #588214;
  z-index: 1;
   &::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 140px;   
    left: 0;
    transform: translate(-50%);
    bottom: -30%;
    background-color: #659419;
    border-radius: 50%;
    box-shadow: inset -10px -32px 0 3px #588214;
  }
  &::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;   
    left: 60%;
    transform: translate(-50%);
    bottom: -45%;
    background-color: #659419;
    border-radius: 50%;
    box-shadow: inset -10px -10px 0 3px #588214;
    z-index: 2;
  }
}
.tree-trunk {
  position: absolute;
  width: 20px;
  height: 200px;   
  left: 88.5%;
  transform: translate(-50%);
  bottom: 10%;
  background-color: #854f02;
  box-shadow: inset -9px 0 0 0 #724300;
  border-radius: 10%;
  z-index: 0;
}
.plant-pot {
  position: absolute;
  width: 70px;
  height: 40px;   
  left: 21%;
  bottom: 17.5%;
  background-color: #009499;
  box-shadow: inset -20px 0 0 0 #008489;
  border-radius: 0 0 40% 40%;
  z-index: 3;
  &::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 10px;   
    left: 0;
    bottom: 100%;
    background-color: #008d92;
    box-shadow: inset -20px 0 0 0 #00797e;
    border-radius: 5%;
  }
}
.cactus {
  position: absolute;
  width: 30px;
  height: 50px;   
  left: 24.3%;
  bottom: 23.5%;
  background-color: #a1b400;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%235c650c' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  box-shadow: inset -10px 0 0 0 #707d00;
  border-radius: 40% 40% 0 0;
  z-index: 2;
  &::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;   
    left: 35%;
    bottom: 91%;
    background-color: #ff3a64;
    border-radius: 50%;
  }
}
.cloud1 {
    position: absolute;
    width: 120px;
    height: 100px;   
    left: -80%;
    bottom: 75%;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -32px 0 3px #cdcdcd;
    z-index: 0;
   &::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 150px;   
    left: 40%;
    bottom: 0;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -5px 0 3px #cdcdcd;
  }
  &::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 120px;   
    left: 200%;
    transform: translate(-50%);
    bottom: 0;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -5px 0 3px #cdcdcd;
    z-index: 2;
  }
}
.cloud2 {
    position: absolute;
    width: 180px;
    height: 120px;   
    left: -100%;
    bottom: 73%;
    background-color: #d4d3d3;
    border-radius: 50%;
    box-shadow: inset -10px -32px 0 3px #cbcbcb;
    z-index: 0;
   &::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 160px;   
    left: 40%;
    bottom: 0;
    background-color: #d4d3d3;
    border-radius: 50%;
    box-shadow: inset -10px -15px 0 3px #cbcbcb;
  }
  &::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 120px;   
    left: 180%;
    transform: translate(-50%);
    bottom: 0;
    background-color: #d4d3d3;
    border-radius: 50%;
    box-shadow: inset -10px -15px 0 3px #cbcbcb;
    z-index: 2;
  }
}
.cloud3 {
    position: absolute;
    width: 120px;
    height: 100px;   
    left: -100%;
    bottom: 75%;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -32px 0 3px #cdcdcd;
    z-index: 0;
   &::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 150px;   
    left: 40%;
    bottom: 0;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -5px 0 3px #cdcdcd;
  }
  &::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 120px;   
    left: 200%;
    transform: translate(-50%);
    bottom: 0;
    background-color: #dcdcdc;
    border-radius: 50%;
    box-shadow: inset -10px -5px 0 3px #cdcdcd;
    z-index: 2;
  }
}

View Compiled

var yoyoGlow = $('.lamp-bulb');
TweenMax.set(yoyoGlow, {boxShadow: '0 0 50px 23px #ffe491'})
TweenMax.to(yoyoGlow, 1, {
    boxShadow: '0 0 35px 23px #ffe491',
    repeat: -1,
    yoyo: true
});

var timeline =  new TimelineMax();
var houseBodyDark = "url('data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23ba9758' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')";
var darkenTime = 1;

timeline.to('.cloud1', 5, {ease: Back.easeOut.config(1), left: '62%'})
.to('.cloud2', 5, {ease: Back.easeOut.config(0.5), left: '30%'}, 1)
.to('.cloud3', 6, {ease: Back.easeOut.config(0.3), left: '2%'}, 1.5)
.to('body', 5, {backgroundColor: '#dcdcdc'}, 4)
.to('.house-body', darkenTime, {backgroundColor: '#f4d6a0', backgroundImage: houseBodyDark}, 7)
.to('.column1, .column2, .column3, .column4', darkenTime, {borderBottom: '290px solid #fff8d9'}, 7)
.to('.porch-floor', darkenTime, {borderBottom: '40px solid #c5c5c5'}, 7)
.to(yoyoGlow, 1, {boxShadow: '0 0 50px 28px #fbda75', repeat: -1, yoyo: true}, 7)
.to('.roof', darkenTime, {borderBottom: '125px solid #343742'}, 7)
.to('.roof2', darkenTime, {borderBottom: '30px solid #434756'}, 7)
.to('.door', darkenTime, {backgroundColor: '#34460e'}, 7)
.to('.door-rectangle1, .door-rectangle2, .door-rectangle3, .door-rectangle4', darkenTime, {backgroundColor: '#34460e', border: '9px solid #2f3e0c'}, 7)
.to('.window1, .window2', darkenTime, {backgroundColor: '#88b7b8'}, 7);

This Pen is owned by Christine on CodePen.

See more by @ccogswell on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript