image gradient

HTML

<div class="gradient">
  <div class="bg"></div>
</div>

CSS

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: -webkit-linear-gradient(to bottom right, #8c8c8c 0%, #fff 100%);
  background: linear-gradient(to bottom right, #8c8c8c 0%, #fff 100%);
}
.bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: url("http://equaldex.com/img/regions/lgbt-canada.png") right no-repeat;
  animation: rightToLeft 3s ease-in-out 1;
}

@keyframes rightToLeft {
  0% {
    width: 100px;
    transform: translateX(40%);
  }
  50% {
    width: 300px;
    transform: translateX(0);
  }
  100% {
    width: 600px;
  }
}