文字起始位置左，中和右(Text starting position Left, Center and Right)

当我加载这个动画时，文本从HTML页面的左侧开始。

但我需要它像下面

“你好”应该从html页面的左上角一侧开始 “你的”应该从页面的中间顶部（中心顶部）外面开始 “世界”应该从页面右上角的小外部开始

（为了更清晰和理解，我编辑了上述内容）

所有这些都应该放到中心放大。所有这些都必须返回缩小到页面的左侧。

的jsfiddle

$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 000, function() {
    // 4. Pause for  seconds
    $(this).delay(000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position) 
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 000, function() {
        $(this).find('span').fadeOut()
    })
}); 
  
h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
} 
  
<script src="https://ajax./ajax/libs/jquery/1.11.0/js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1> 
  
 
When I'm loading this animation, the text is starting from Left side of the HTML page.
 
But I need it like the below
 
 
  
  "Hello" Should start from little outside of Left Top corner side of the html page 
  "Your" should start from little outside Middle Top (center top) of the page 
  "World" should start from little outside Right Top Corner of the page 
  
 
(I have edited the above for better clarity and understanding)
 
All together, should come to the center zooming in. And all of them have to return zooming out to the left side of the page.
 
JSFiddle
 
 
 
  
  
$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 000, function() {
    // 4. Pause for  seconds
    $(this).delay(000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position) 
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 000, function() {
        $(this).find('span').fadeOut()
    })
}); 
  
h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
} 
  
<script src="https://ajax./ajax/libs/jquery/1.11.0/js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1> 
  
 

                
最满意答案
                
                    
                        
 因为你需要的动画非常复杂（从不同侧面滑入和缩放），也许创建一个自定义的动画？ 
 
 在下面的例子中，我利用2D变换和动画的step属性。 我把两个长的<span>放在两个词之间，将它们推到两边。 
 
 点击红框开始动画。 如果你有任何问题随时问。 
 
 ps：我在元素上留下了边界，所以你可以看到它们是如何移动的 
 
 
 
  
  
$(function() {
  FixMargins();

  $(".container").click(function() {
    var phWidth = $(".placeholder").width();
    var height = $(".container").height();
    containerHeight = $(".theText").height();
    var newTopMargin = (height - containerHeight) / 2;
    
    $(".theText").animate({
      transform: 2
    }, {
      step: function(now, fx) {
        var newscale = 1 + +now;
       $(this).css({
         'transform': "scale(" + newscale + "," + newscale + ")",
                   "opacity":-1 + now
                   });
        $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
        $(".placeholder").css({
          "width": phWidth - phWidth * now/2
        });
        FixMargins();
      },
      duration: 700
    }).promise().done(function() {
      $(this).delay(500);
      var textTop = $(".theText").css("margin-top").split('p')[0];
      var textLeft = $(".theText").css("margin-left").split('p')[0];
      $(this).animate({
        transform: 2
      }, {
        step: function(now, fx) {
          cole.log(textLeft - textLeft * now);
          var newscale =  - +now;
          $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

          $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
          $(".theText").css("marginTop", textTop - textTop / 2 * now);
        },
        duration: 500
      }).promise().done(function() {
       
        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });


  });
});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

} 
  
.container {
  width: 500px;
  height: 00px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {

  width: 200px;
  display: inline-block;

} 
  
<script src="https://ajax./ajax/libs/jquery/2.1.1/js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div> 
  
 
since the animation you need is quite complex (slide in and zoom from different sides), perhaps create a custom one?
 
in the example below i utilize 2D transforms and the animation's step attribute. i put 2 long <span> in between the words to push them to the sides.
 
click on the red box to start the animation. if you have any questi, feel free to ask.
 
ps: i left borders on the elements so you can see how they move
 
 
 
  
  
$(function() {
  FixMargins();

  $(".container").click(function() {
    var phWidth = $(".placeholder").width();
    var height = $(".container").height();
    containerHeight = $(".theText").height();
    var newTopMargin = (height - containerHeight) / 2;
    
    $(".theText").animate({
      transform: 2
    }, {
      step: function(now, fx) {
        var newscale = 1 + +now;
       $(this).css({
         'transform': "scale(" + newscale + "," + newscale + ")",
                   "opacity":-1 + now
                   });
        $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
        $(".placeholder").css({
          "width": phWidth - phWidth * now/2
        });
        FixMargins();
      },
      duration: 700
    }).promise().done(function() {
      $(this).delay(500);
      var textTop = $(".theText").css("margin-top").split('p')[0];
      var textLeft = $(".theText").css("margin-left").split('p')[0];
      $(this).animate({
        transform: 2
      }, {
        step: function(now, fx) {
          cole.log(textLeft - textLeft * now);
          var newscale =  - +now;
          $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

          $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
          $(".theText").css("marginTop", textTop - textTop / 2 * now);
        },
        duration: 500
      }).promise().done(function() {
       
        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });


  });
});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

} 
  
.container {
  width: 500px;
  height: 00px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {

  width: 200px;
  display: inline-block;

} 
  
<script src="https://ajax./ajax/libs/jquery/2.1.1/js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div>