[SOLVED] Transition in mask-image

Transition in mask-image

I have a container where a fade is being applied on the right hand side but I want the fade to transition in. So on load the content is shown and then the mask-image transitions in smoothly. Any idea?

.container {
  background-color: black;
}

.container--right-fade {
  mask-image: linear-gradient(-90deg, transparent, #000 32px);
}

.list {
  display: grid;
  grid-auto-flow: column;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  background-color: rgb(153, 51, 0);
}

<div class="container container--right-fade">
  <ul class="list">
    <li class="list-item">Content</li>
    <li class="list-item">Content</li>

</div>

Solution

According to my understanding you want fade-in animation on mask image and not on content blocks. To achieve that you need to sperate the containers one for mask-image and another for content area and then align them with help of position: absolute.

I have added two example one is using flexbox but I think the example with absolute will align closely with your needs.

body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  width: fit-content;
  position: relative;
}

.maskDiv {
  background-image: linear-gradient(90deg, #000000 90%, transparent);
  position: absolute;
  top: 10px;
  right: 0;
  width: 100%;
  height: 83%;
  animation: fadeIn 3s;
  z-index: -1;
}

.contentDiv {
  padding: 10px 20px 10px 10px;
  display: flex;
  gap: 10px;
}

.boxDiv {
  background-color: red;
  width: 100px;
  height: 100px;
}

.maskDivTwo {
  background-image: linear-gradient(90deg, #636363, transparent);
  width: 20px;
  height: 100px;
  animation: fadeIn 2s;
}

.contentDivTwo {
  padding: 10px 20px 10px 10px;
  display: flex;
}

.contentDivTwo div:nth-child(1) {
  margin-right: 10px
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<div class="mainDiv">
  <div class="maskDiv">
  </div>
  <div class="contentDiv">
    <div class="boxDiv">
    </div>
    <div class="boxDiv">
    </div>
  </div>
</div>

<div class="mainDiv">
  <div class="contentDivTwo">
    <div class="boxDiv">
    </div>
    <div class="boxDiv">
    </div>
    <div class="maskDivTwo">
    </div>
  </div>
</div>

If I have misunderstood anything then please do share.