<body>
<div class="image">
</div>
</body>
body {
  margin: 0;
}

.image {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://images.pexels.com/photos/7572824/pexels-photo-7572824.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
  background-repeat: no-repeat;
  animation: face 2s ease-out;
}

@keyframes face {
  from {
    opacity: 0%; 
    width: 0%;
  }
  to {
    opacity: 100%; 
    width: 100%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.