やっと陽の目をみるベジェ曲線！

JavaScript

http://oshiete.goo.ne.jp/qa/7913163.html

リスト要素(ol)の親でoverflow:hidden をすれ！

<!DOCTYPE html>
<meta charset="UTF-8">
<title>ベジェ曲線を利用して動く</title>

<style>

ol#hoge {
  width : 800px;
  height : 82px;
  overflow : hidden;
}

#hoge li {
  width : 198px;
  border : 1px red solid;
  height : 80px;
  display : inline-block;
  overflow : hidden;
}

</style>

<body>

<ol id="hoge">
  <li>
    abc<br>
    def
  <li>
    ghi<br>
    jkl
  <li>
    mno<br>
    pqr
  <li>
    stu<br>
    vwx
  <li>
    yzA<br>
    BCD
</ol>

<script>
function BG(a,b,c,d){var e=3*a,f=3*(c-a)-e,g=3*b,h=1-e-f,i=3*(d-b)-g,j=1-g-i;return function(a){for(var b=a,c=5,d;c--;)if(.001<Math.abs(d=b*(e+b*(f+b*h))-a))b-=d/(e+b*(2*f+3*h*b));return((b*j+i)*b+g)*b}};


(function () {
  var parent = document.getElementById ('hoge');
  var interval = [2000, 20];
  var mode = 0;
  var width = 200;
  var step = .01;
  var bz = BG.apply (null, [0, 0, 0.28, 1]);
  
  var c = parent.childNodes;
  var i = c.length;
  var e;
  
  
  for (; e = c[--i]; )
    if (1 !== e.nodeType)
      parent.removeChild (e);
  
  var x;
  
  function LOOP () {
    var e = parent.firstChild;
    var ml;
    
    switch (mode) {
    case 0 :
      x = 0;
      setTimeout (LOOP, interval[mode]);
      mode = 1;
      break;

    case 1 :
      x += step;
      if (1 < x) {
        x = 1;
        mode = 0;
        parent.appendChild (e);
        ml = 0;
      }
      else {
        ml = (-bz (x) * width |0);
      }
      e.style.marginLeft = ml + 'px';
      setTimeout (LOOP, interval[mode]);
    }
  }

  LOOP ();
}) ();

</script>