Automatic Door by

Tori Pugh

On: 1 Jun 2016

Personal site: http://toripugh.com

fullscreen 
<div class="door-frame">
  <div class="window"></div>
  <div class="opening">
    <div class="door left"></div>
  <div class="door right"></div>
  </div>
  <div class="window"></div>
</div>

body {
  background-color: #222;
}
.door-frame {
  background-color: #ddd;
  width: 800px;
  height: 250px;
  position: absolute;
  display: flex;
}
.window {
  background: #feffff;
  background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 65%, #a0d8ef 100%);
  background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 65%,#a0d8ef 100%);
  background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 65%,#a0d8ef 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
  margin: 8px;
  flex: 1;
}
.door {
   background: #feffff;
  background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
  background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
  background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
  border: 8px solid #ddd;
  flex: 1;
}
.opening {
  display: flex;
  flex: 2;
  background: #222;
}
.left, .right {
  transition: .3s ease-in-out;
}
.door-frame:hover .left {
    transform: translateX(-184px);
}
.door-frame:hover .right {
    transform: translateX(184px);
}

29