问CSS关于Safari的问题

EN

<div class="col-md-5 hla-building-col animated fadeInUp" style="height:350px;background-image:url(/placeholder.jpg)">
   <div class="overlay text-center">
      <h3>Karma</h3>
      <p>Sitting right in the heart of it all...</p>
      <a>Learn More</a>
   </div>
</div>

.hla-building-col {
  padding: 0;
  box-shadow: -1px 0px 50px -6px rgba(102,103,102,1);
}    
.hla-building-col .overlay {
  background-color: rgba(255,255,255,.9);
  width: 80%;
  height: 40px;
  padding: 8px 15px;
  margin: 0 auto;
  transform: translateY(165px);
  transition: all 600ms ease;
}
.hla-building-col:hover .overlay {
  width: 100%;
  height: 100%;
  padding: 100px 15px;
  /**** EDIT: Properties above are not rendering ****/
  margin: 0 auto;
  transform: translateY(0);
  /*     transition: all 600ms ease; */
  animation-duration: 1s;
  animation-name: slidein;
}
.hla-building-col .overlay p, .hla-building-col .overlay a {
    opacity: 0;
}
.hla-building-col:hover .overlay p, .hla-building-col:hover .overlay a {
    opacity: 1;
    transition: all 1000ms ease;
    transition-delay: 1000ms;
}


@keyframes slidein {
  from {
        width: 60%;
    height: 40px;
    transform: translateY(165px);
    padding-top: 8px;
  }

  to {
    width: 100%;
    height: 100%;
    transform: translateY(0);
    padding-top: 100px;
  }
}