<div class="watch"></div>

body {
  background:#3e928f;
  display:grid;
  margin:0;
  height:100vh;
  overflow:hidden;
}
.watch {
  height:100px;
  width:300px;
  margin:auto auto 150px 0;
  background:
    radial-gradient(farthest-side,#fff 98%,#0000)32% 80%/15px 15px,
    linear-gradient(#272b2c 0 0) 51.45% 5px/6.8% 75%,
    radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 82% 5px/18.75px 18.75px,
    radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 86% 23.75px/18.75px 18.75px,
    radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 88% 42.5px/18.75px 18.75px,
    radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 91% 61.25px/18.75px 18.75px,
    radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 82% 80px/18.75px 18.75px,
    linear-gradient(#414141 0 0) 0 0 /40% 90%,
    linear-gradient(#fff 0 0) 0 3px/43% 80%,
    linear-gradient(#f6c79d 0 0) 0 5px/80% 75%,
    linear-gradient(#f6c79d 0 0) 0 23.75px/85% 18.75px,
    linear-gradient(#f6c79d 0 0) 0 42.5px/85% 18.75px,
    linear-gradient(#f6c79d 0 0) 0 61.25px/88% 18.75px,
    linear-gradient(#f6c79d 0 0) 78% 80px/9% 18.75px,
    linear-gradient(to bottom left,#f6c79d 50%,#0000 52%) 67% 79px/13% 19px;
  background-repeat:no-repeat;
  position:relative;
  filter: drop-shadow(0px 0px .8px black);
}
.watch:before {
  content: "12:12 01/10";
  position: absolute;
  width: 13%;
  height: 45px;
  left: 45%;
  top: 20%;
  font-size: 8px;
  line-height: 13px;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  padding-top: 5px;
  box-sizing: border-box;
  border: 5px solid #464b4e;
  border-radius: 13px;
  background: 
    radial-gradient(#caced2 98%,#0000) center/0% 0% no-repeat
    #000;
  animation:open 3s forwards;
}
.watch:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    background: 
      radial-gradient(farthest-side,#fff 98%,#0000)32% 80%/15px 15px,
      radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 82% 5px/18.75px 18.75px, 
      radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 86% 23.75px/18.75px 18.75px, 
      radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 88% 42.5px/18.75px 18.75px, 
      radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 100% 61.25px/18.75px 18.75px, 
      radial-gradient(farthest-side, #f6c79d 98%,#0000 ) 82% 80px/18.75px 18.75px, 
      linear-gradient(#414141 0 0) 0 0 /40% 90%, 
      linear-gradient(#fff 0 0) 0 3px/43% 80%, 
      linear-gradient(#f6c79d 0 0) 0 5px/80% 75%, 
      linear-gradient(#f6c79d 0 0) 0 23.75px/85% 18.75px, 
      linear-gradient(#f6c79d 0 0) 0 42.5px/85% 18.75px, 
      linear-gradient(#f6c79d 0 0) 0 61.25px/96% 18.75px, 
      linear-gradient(#f6c79d 0 0) 78% 80px/9% 18.75px, 
      linear-gradient(to bottom left,#f6c79d 50%,#0000 52%) 67% 79px/13% 19px;
    background-repeat: no-repeat;
  animation:hand 3s forwards;
  filter: drop-shadow(0px 0px 1px black);
  z-index:2;
}

@keyframes open {
  0%,50% {background-size:0% 0%}
  65%,100% {background-size:100% 100%}
}

@keyframes hand {
  0%,90%,100%{transform: scaleY(-1) rotate(90deg) translate(-250px,-25px)}
  50%,70% {transform: scaleY(-1) rotate(90deg) translate(-45px,-25px)}
}