var height = 25,
    width = 100;

d3.select('div').append('svg')
        .attr('width', '100%')
        .attr('viewBox', "0 0 " + width + " " + height)
        .attr('style', 'border: solid 1px green')
        .append('g')
        .attr('transform','translate('+ width/2 +','+ height/2 +')')
        .attr('id', 'main');

var text = d3.select('#main').append('text')
             .attr('class', 'myText')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline','middle') 
             .text('My Message');

bbox = text[0][0].getBBox();

var gradient = d3.select('svg').append("defs")
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("spreadMethod", "pad");

gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", 0);

fadeBox = d3.select('#main').append('rect')
  .attr('x', bbox.x)
  .attr('y', bbox.y)
  .attr('width', bbox.width)
  .attr('height', bbox.height)
  .style("fill", "url(#gradient)");



fadeBox.transition()
  .delay(500)
  .duration(2000)
  .attr('width', 0)
  .attr('x', bbox.width)


gradient.transition()
  .delay('500')
  .duration('2000')
  .attr('x1','100%')