Winter Line Town Brown Cony Sally CSS3 Animation

index.html

<div class="cloud cloud-type1 cloud1"><div></div><div></div><div></div></div>
<div class="cloud cloud-type2 cloud2"><div></div><div></div><div></div><div></div></div>
<div class="cloud cloud-type3 cloud3"><div></div><div></div></div>
<div class="background">
  <div id="snows"></div>
</div>
<div class="container">
  <div id="characters1" class="characters"></div>
  <div id="characters2" class="characters"></div>
  <div id="characters3" class="characters"></div>
  <div class="moon">
    <div class="cony line-character">
      <div class="head">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="face">
          <div class="wrinkles left"></div>
          <div class="wrinkles right"></div>
          <div class="eye left"></div>
          <div class="eye right"></div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body">
        <div class="arm left">
          <div class="hand">
            <div class="beer">
              <div class="grip"></div>
              <div class="water"></div>
            </div>
          </div>
        </div>
        <div class="arm right">
          <div class="hand">
            <div class="beer">
              <div class="grip"></div>
              <div class="water"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="brown line-character">
      <div class="head">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="face">
          <div class="eye left"></div>
          <div class="eye right"></div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body">
        <div class="arm left">
          <div class="beer">
            <div class="grip"></div>
            <div class="water"></div>
          </div>
        </div>
        <div class="arm right">
          <div class="beer">
            <div class="grip"></div>
            <div class="water"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="sally line-character">
      <div class="head">
        <div class="eyes">
          <div class="eye left"></div>
          <div class="eye right"></div>
        </div>
        <div class="mouths">
          <div class="mouth up"></div>
          <div class="mouth down"></div>
        </div>
      </div>
      <div class="body">
        <div class="wing">
          <div class="beer">
            <div class="grip"></div>
            <div class="water"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

script.babel

Scene.setAlias("ty", ["transform", "translateY"]);
Scene.setAlias("rotate", ["transform", "rotate"]);
Scene.setAlias("scale", ["transform", "scale"]);

function createSnows(num) {
  const snows = [];

  for (var i = num; i >= 1; --i) {
    snows.push(`<div class="snow particle particle${i}" style="left: ${10 + (i % 8) * 11}%"></div>`);
  }
  return snows.join("");
}
snows.innerHTML = createSnows(40);


const scene = new Scene({
  ".cony": {
    0: {
      scale: 0,
      rotate: "-20deg",
    },
    1: {
      scale: 0.8,
    }
  },
  ".cony .arm": i=> ({
    0: {
      ty: "30px",
      rotate: `${i ? "" : "-"}40deg`,
    },
    1: {
      rotate: `${i ? "" : "-"}60deg`,
    },
    options: {
      direction: "alternate",
      iterationCount: "infinite",
    }
  }),
  ".brown": {
    0.1: {
      scale: 0,
      rotate: "20deg",
    },
    1.1: {
      scale: 0.8,
    }
  },
  ".brown .arm": i=> ({
    0: {
      ty: "30px",
      rotate: `${i ? "" : "-"}50deg`,
    },
    1: {
      rotate: `${i ? "" : "-"}70deg`,
    },
    options: {
      direction: "alternate",
      iterationCount: "infinite",
    }
  }),
  ".sally": {
    0.2: {
      scale: 0,
      rotate: "20deg",
    },
    1.2: {
      scale: 1,
    }
  },
  ".sally .wing": {
    0: {
      rotate: "30deg",
    },
    1: {
      rotate: "10deg",
    },
    options: {
      direction: "alternate",
      iterationCount: "infinite",
    }
  },
  ".snow.particle": () => ({
    0: {
      ty: "-4vh",
      rotate: "0deg",
    },
    10: {
      ty: "104vh",
      rotate: "1080deg",
    },
    options: {
      delay: Math.random() * 10,
      easing: Scene.LINEAR,
      iterationCount: "infinite",
    }
  }),
}, {
  selector: true,
  easing: Scene.EASE_IN_OUT,
});



function createCharacters(target, chrs, no, rotate) {
  target.innerHTML = chrs.split("").map(chr => `<span data-character="${chr}"></span>`).join("");

  scene.set({
    [`#${target.id} span`]: (i) => ({
      0: {
        transform: "translate(-50%, -50%)",
        rotate: `${rotate + 20}deg`,
        opacity: 0,
      },
      0.5: {
        opacity: 1,
      },
      1: {
        rotate: `${rotate + i * (7 - no * 0.8)}deg`,
      },
      options: {
        delay: 0.5 + no * 1.5,
      },
    }),
  });
}

createCharacters(characters1, "2018. 12. 25", 0, 0);
createCharacters(characters2, "Year-End Party", 1, -50);
createCharacters(characters3, "Christmas", 2, -5);
scene.playCSS();

scripts

<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Mountains+of+Christmas');

html, body {
  font-family: 'Mountains of Christmas', cursive;
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#0B0D26, #4E335C);
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.cloud {
  position: absolute;
  opacity: 0.2;
}
.cloud-type1 {
  width: 150px;
  height: 80px;
}
.cloud div {
  position: absolute;
  background: white;
  border-radius: 50%;
}
.cloud-type1 div:nth-child(1) {
  width: 65%;
  height: 50%;
  left: 25%;
}
.cloud-type1 div:nth-child(2) {
  width: 80%;
  height: 50%;
  top: 20%;
  left: 10%;
}
.cloud-type1 div:nth-child(3) {
  top: 40%;
  width: 100%;
  height: 50%;
}

.cloud-type2 {
  width: 150px;
  height: 80px;
}

.cloud-type2 div:nth-child(1) {
  width: 60%;
  height: 60%;
  left: 30%;
}
.cloud-type2 div:nth-child(2) {
  width: 60%;
  height: 60%;
  left: 0%;
  top: 20%;
}
.cloud-type2 div:nth-child(3) {
  width: 60%;
  height: 60%;
  left: 40%;
  top: 20%;
}
.cloud-type2 div:nth-child(4) {
  width: 60%;
  height: 60%;
  left: 15%;
  top: 40%;
}
.cloud-type3 {
  width: 150px;
  height: 60px;
}

.cloud-type3 div:nth-child(1) {
  width: 80%;
  height: 60%;
  top: 40%;
}
.cloud-type3 div:nth-child(2) {
  width: 80%;
  height: 60%;
  left: 20%;
}
.cloud {
  top: 65%;
  left: 50%;
}
.cloud1 {
  transform: translate(100px, -170px);
}
.cloud2 {
  transform: translate(10px, 80px);
}
.cloud3 {
  transform: translate(-230px, -10px);
}

.particle {
  position: absolute;
  background: white;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 0px 0px 2px 2px white;
  transform-origin: 50% 30px;
}
.moon {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 200px;
  background: #E0E9F6;
  top: 65%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /*   box-shadow: 0px 0px 10px 5px #E0E9F6; */
}

.moon:after {
  position: absolute;
  content: "";
  background: inherit;
  width: 200px;
  height: 120px;
  border-radius: 50% / 20px 20px 100px 100px;
  bottom: 0;
}

.cony, .brown, .sally {
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
}
.cony {
  position: absolute;
  width: 150px;
  height: 200px;
  top: -80px;
  left: -20px;
  transform-origin: 50% 100%;
  transform: scale(0.8) rotate(-20deg);
}

.cony .head {
  position: absolute;
  width: 150px;
  height: 130px;
  background: #fafafa;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.cony .head:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  box-shadow: inset -5px -6px 0px 0px #eee;
}
.cony .ear {
  position: absolute;
  width: 35px;
  height: 110px;
  bottom: 60%;
  background: #E3919E;
  border-radius: 50%;
  box-shadow: inset -2px 0px 0px 7px #fafafa;
  transform-origin: 50% 80%;

}
.cony .ear.left {
  right: 60%;
  transform: rotate(-5deg);
}
.cony .ear.right {
  left: 45%;
}
.cony .face {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.cony .wrinkles {
  position: absolute;
  width: 30px;
  height: 3px;
  border-radius: 1px;
  background: #333;
  transform: rotate(70deg);
  top: 30%;
}
.cony .wrinkles.left {
  right: 52%;
}
.cony .wrinkles.right {
  left: 40%;
  transform: rotate(-70deg);
}
.cony .eye {
  position: absolute;
  width: 25px;
  height: 3px;
  border-radius: 1px;
  background: #333;
  top: 45%;
}
.cony .eye:before, .cony .eye:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  transform-origin: calc(100% - 1px) 50%;
}
.cony .eye:before {
  transform: rotate(30deg);
}
.cony .eye:after {
  transform: rotate(-30deg);
}
.cony .eye.left {
  right: 62%;
  transform: rotate(10deg);
}
.cony .eye.right {
  left: 50%;
  transform: scale(-1, 1) rotate(10deg);
}
.cony .nose {
  position: absolute;
  width: 10px;
  height: 8px;
  border-radius: 50%;
  border: 3px solid #333;
  top: 50%;
  left: 44%;
  transform: translateX(-50%);
}
.cony .nose:before {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  width: 3px;
  height: 10px;
  background: #333;
  transform: translate(-50%, 0px);
}
.cony .mouth {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50% / 0 0 100% 100%;
  border: 3px solid #333;
  background: #cc5543;
  left: 44%;
  transform: translate(-50%, 20px);
  /*   overflow: hidden; */
}
.cony .mouth:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 14px;
  background: #ffaaaa;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% / 20% 20% 80% 80%;
}
.cony .body {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
  background: #fafafa;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.cony .arm {
  position: absolute;
  width: 30px;
  height: 70px;
  background: #fafafa;
  transform-origin: 50% 100%;
  bottom: 100%;
  transform: translateY(30px) rotate(-40deg);
  z-index: -1;
}
.cony .hand {
  position: absolute;
  width: 42px;
  height: 35px;
  bottom: 100%;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, 10px);
  background: inherit;
}
.cony .hand:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #eee;
}
.cony .arm.right {
  right: 0;
  transform: translateY(30px) rotate(40deg);
}
.cony .arm.right .beer {
  transform: scaleX(-1) rotate(90deg);
}

.brown {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -75px;
  left: 40px;
  transform-origin: 50% 100%;
  transform: scale(0.8) rotate(20deg);
}

.brown .head {
  position: absolute;
  width: 160px;
  height: 145px;
  background: #83604E;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.brown .head:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  box-shadow: inset -5px -6px 0px 0px #62473B;
}
.brown .ear {
  position: absolute;
  width: 40px;
  height: 48px;
  bottom: 72%;
  background: #62473B;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 6px #83604E;
  transform-origin: 50% 80%;

}
.brown .ear.left {
  right: 58%;
  transform: rotate(-30deg);
}
.brown .ear.right {
  left: 58%;
  transform: rotate(30deg);
}
.brown .face {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.brown .eye {
  position: absolute;
  background: #333;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: 40%;
}
.brown .eye.left {
  right: 50%;
}
.brown .eye.right {
  left: 60%;
}
.brown .nose {
  position: absolute;
  width: 38px;
  height: 45px;
  top: 50%;
  left: 55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #D9C8BD;
}
.brown .nose:before {
  position: absolute;
  content: "";
  width: 13px;
  height: 10px;
  left: 50%;
  top: 5px;
  background: #333;
  border-radius: 50% / 20% 20% 80% 80%;
  transform: translate(-50%);
}
.brown .nose:after {
  position: absolute;
  content: "";
  width: 3px;
  height: 14px;
  background: #333;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
}
.brown .mouth {
  position: absolute;
  width: 14px;
  height: 3px;
  top: 68%;
  left: 55%;
  background: #333;
  transform-origin: calc(100% - 1px) 50%;
  transform: translateX(-90%) rotate(-60deg);
  border-radius: 1px;
}
.brown .mouth:after {
  position: absolute;
  content: "";
  width: 3px;
  height: 10px;
  right: 0;
  background: inherit;
  border-radius: inherit;
  transform-origin: 50% 1px;
  transform: rotate(20deg);
}

.brown .body {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
  background: #83604E;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.brown .arm {
  position: absolute;
  width: 30px;
  height: 70px;
  background: #83604E;
  border-radius: 15px / 50% 50% 0px 0px;
  transform-origin: 50% 100%;
  bottom: 100%;
  z-index: -1;
}
.brown .arm:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
}
.brown .arm.left {
  transform: translateY(30px) rotate(-50deg);
}
.brown .arm.right {
  right: 0;
  transform: translateY(30px) rotate(50deg);
}
.brown .arm.right .beer {
  transform: scaleX(-1) rotate(90deg);
}
.beer {
  position: absolute;
  width: 35px;
  height: 55px;
  top: -47px;
  background: #ddd;
  transform: rotate(90deg);
  border-radius: 5px / 50%;
}
.beer:after {
  position: absolute;
  content: "";
  width: 86%;
  height: 80%;
  background: #E7d05C;
  box-shadow: inset 5px -5px 0px 0px #c7c051;
  border-radius: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.grip {
  position: absolute;
  top: 10px;  
  left: 100%;
  width: 20px;
  height: 30px;
  border: 4px solid #ddd;
  border-radius: 50%;
  transform: translateX(-12px) rotate(30deg);
}
.sally {
  position: absolute;
  width: 60px;
  height: 120px;
  left: 40px;
  top: 5px;
  transform: rotate(20deg);
  transform-origin: 50% 100%;
}
.sally .head {
  position: absolute;
  border-radius: 50%;
  background: #FFD93B;
  width: 60px;
  height: 60px;
  left: 0%;
  top: 10%;
  z-index: 2;
  box-shadow: inset -3px -2px 0px 0px #E0AA5A;
}
.sally .eye {
  position: absolute;
  border-radius: 50%;
  top: 30%;
  width: 10px;
  height: 10px;
  background: black;
}
.sally .eye.left {
  left: 53%;
}
.sally .eye.right {
  right: 53%;
}
.sally .mouths {
  position: absolute;
  width: 10px;
  height: 20px;
  background: #FF6600;
  border-radius: 0% 100% 100% 0 / 50%;
  border-left: 0;
  top: 50%;
  left: 53%;
  z-index: 3;
}
.sally .mouth {
  position: absolute;
  width: 14px;
  height: 10px;
  border-radius: 5px 0px 0px 5px;
  background: inherit;
  right: 100%;
  border-right: 0px;
}
.sally .mouth.up {
  top: 0px;
  transform-origin: 100% 100%;
}
.sally .mouth.up:after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 100%;
  width: 15px;
  height: 3px;
  background: #CF4804;
  left: 3px;
  transform: translateY(-50%);
}
.sally .mouth.down {
  bottom: 0px;
  transform-origin: 100% 0%;
}
.sally .body {
  position: absolute;
  width: 50px;
  height: 45px;
  top: 50px;
  left: 15%;
  border-radius: 50%;
  background: #FFD93B;
}
.sally .body:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
}
.sally .wing {
  position: absolute;
  width: 40px;
  height: 24px;
  border-radius: 50% / 30% 30% 70% 70%;
  background: #FFD93B;
  border: inherit;
  right: 73%;
  top: 20px;
  transform-origin: 100% 20%;
  transform: rotate(20deg);
}
.sally .wing:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  box-shadow: inset -2px -3px 0px 0px #E0AA5A;
}
.sally .wing .beer { 
  transform: translate(-32px, 30px) scale(0.6);
}

.characters {
  position: absolute;
  top: 65%;
  left: 50%;
  transform:translate(-50%, -50%);
}
.characters span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 30px;
}
.characters span:before {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 30px;
  content: attr(data-character);
  font-size: 30px;
  font-weight: bold;
  color: #fafafa;
}
#characters1 {
  width: 400px;
  height: 400px;
}
#characters1 span {
  transform-origin: 50% calc(50% + 200px);
}
#characters2 {
  width: 480px;
  height: 480px;
}
#characters2 span {
  transform-origin: 50% calc(50% + 240px);
}
#characters3 {
  width: 560px;
  height: 560px;
}
#characters3 span {
  transform-origin: 50% calc(50% + 280px);
}

.cloud, .characters, .moon {
  top: 65%;
}

@media screen and (max-width: 430px) {
  .container {
    transform: scale(0.7);
  }
}

winter-line-town-brown-cony-sally-css3-animation.markdown

Winter Line Town Brown Cony Sally CSS3 Animation

A Pen by santosh on CodePen.

License.