<style>
  * {
    box-sizing: border-box;
  }
  html, body {
    align-items: center;
    background: linear-gradient(45deg, dodgerblue, #00e640);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }
  .clapper {
    background-color: #111;
    height: 80px;
    width: 100px;
    position: relative;
  }
  .clapper > div {
    background: repeating-linear-gradient(135deg, #111 0%, #111 10%, #fff 10%, #fff 20%);
    height: 10px;
    width: 110px;
    position: absolute;
    left: -5px;
    top: 0;
  }
  .clapper > div:nth-of-type(1) {
    background: repeating-linear-gradient(-135deg, #fff 0%, #fff 10%, #111 10%, #111 20%);
    top: -10px;
  }
</style>
<div class='clapper'>
  <div></div>
  <div></div>
</div>
.clapper > div:nth-of-type(1) {
  animation-name: open;
  transform-origin: left;
  animation-duration: .25s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes open {
  to {
    transform: rotate(-80deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.