Alternate Fade out elements on WebKit and Firefox

fade-element

<style>

.mask {
  position: relative;
        
  width: 500px;
  height: auto;
  padding: 10px

  background-color: transparent;
  background-image: -moz-linear-gradient(left, #D0D0D3 80%, rgba(208, 208, 211, 0.3) 100%);
  background-image: -webkit-linear-gradient(left, #D0D0D3 80%, rgba(208, 208, 211, 0.3) 100%);
  background-image: -o-linear-gradient(left, #D0D0D3 80%, rgba(208, 208, 211, 0.3) 100%);
  background-image: linear-gradient(to right, #D0D0D3 80%, rgba(208, 208, 211, 0.3) 100%);
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[color]', endColorstr='[color]', GradientType=1);*/
}

.mask:after {
  content: '';
  position: absolute;
  z-index: 2;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background-color: transparent;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.7) 100%); 
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.7) 100%); 
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.7) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.7) 100%);
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[color]', endColorstr='[color]', GradientType=1);*/
}

</style>

<div class="mask">
      Bacon ipsum dolor sit amet pig capicola flank drumstick tri-tip cow pork. Tenderloin pork belly ham cow chuck strip steak andouille fatback beef ribs. Tongue jowl pig chicken flank drumstick pancetta strip steak capicola biltong. Swine jowl beef ribs filet mignon spare ribs, beef bresaola tail venison pork loin pancetta prosciutto meatloaf fatback turkey. Bresaola turducken beef ribs ribeye salami chicken hamburger meatloaf. T-bone spare ribs rump, strip steak tongue sirloin biltong capicola corned beef bresaola. Swine ham tail filet mignon t-bone flank.
</div>