文字竖行显示并且逐字出现

html:

<dl class="txt">
    <dt> 秋日下江南，有一种生活叫周庄</dt>
    <dd>
    <span>如</span>
    <span>果</span>
    <span>不</span>
    <span>是</span>
    <span>这</span>
    <span>古</span>
    <span>朴</span>
    <span>秀</span>
    <span>雅</span>
    <span>的</span>
    <span>明</span>
    <span>清</span>
    <span>民</span>
    <span>居；</span>
    <br>
    <span>这</span>
    <span>一</span>
    <span>片</span>
    <span>流</span>
    <span>水</span>
    <span>也</span>
    <span>算</span>
    <span>平</span>
    <span>常；</span>                               
   </dd>
  </dl>

css:

.txt .on{opacity: 1;}

/* 文字竖着显示 */
.txt{-webkit-writing-mode: vertical-rl;-ms-writing-mode: vertical-rl;writing-mode: vertical-rl;-webkit-writing-mode: tb-rl; -ms-writing-mode: tb-rl; writing-mode: tb-rl;}


/* 调用动画 */
.txt span{-webkit-animation: wenzi 1s backwards; -moz-animation: wenzi 1s backwards;-ms-animation: wenzi 1s backwards;
    -o-animation: wenzi 1s backwards; animation: wenzi 1s backwards;opacity: 0;}
/* 定义动画 */
@keyframes wenzi{
 from {     
     opacity: 0;
 }
 to {
    opacity: 1;
 }
}

@-moz-keyframes wenzi{
 from {
    opacity: 0;
 }
 to {
    opacity: 1;
 }
}

@-webkit-keyframes wenzi{
 from {
    opacity: 0;
 }
 to {
    opacity: 1;
 }
}

@-ms-keyframes wenzi{
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

@-o-keyframes wenzi1{
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

js:

$(function() {
    var delay = 1;
    $('.txt').find('span').each(function(index, el) {
        var oThis = $(this);
        oThis.addClass('on');
        oThis.css({
            'animation-delay': index * delay + 's'
        });
    });
})