<div class="element"></div>
<script src="typed.js"></script><script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });</script>

实现方法也不神奇，大多数人肯容易可以想到，用js逐个向容器内添加字符

var s = 'Hello World! Hello World! Hello World!';var con = $('.container');var index = 0;var length = s.length;var tId = null;
function start(){
  con.text('');
  
  tId=setInterval(function(){
    con.append(s.charAt(index));
    if(index++ === length){
    clearInterval(tId);
    index = 0;
    start()
    }
  },100);
}
 
start();

CSS实现

如果对细节和浏览器兼容性要求的不是很严格，我们可以通过CSS3实现

animation-timing-function

CSS3的动画都接触过，我们平时这么用

animation: animation-name animation-duration animation-iteration-count

animation: name s infinite;

其实完整版的animation参数很多，也可以写成分别的属性

1. animation-name

2. animation-duration

3. animation-timing-function

4. animation-delay

5. animation-iteration-count

6. animation-direction

今天我们就要关注一下animation-timing-function，大多数动画在时间轴上时线性变化的，jQuery动画的时候我们用的liner参数就是这意思，但CSS3提供了一些其它的变化方式由animation-timing-function属性指定

1. ease

2. linear

3. ease-in

4. ease-out

5. ease-in-out

6. step-start

7. step-end

8. steps

9. cubic-bezier

每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果，这里不多说了

steps

我们看一下steps的效果，其实顾名思义就可以想到steps什么意思，就像俄罗斯方块的小格子往下掉也是动画，但是不是连续的，更像是逐帧的，steps就是实现这种效果的

steps的语法

steps(number_of_steps, [start|end])

· number_of_steps 动画分为多少步执行

· direction 动画显示状态，end：默认值，第一帧开始前显示，start：第一帧结束后显示

看个科学的图片帮助理解

走两步

有了这些我们就能做个好玩儿的效果了

.walk {
  width: 125px;
  height: 150px;
  background: url(//lsly1989.qiniudn.com/xxxasddbgfbwalk.jpg) left;
  -webkit-animation:anima 1s steps(16) infinite ;
}
 
@-webkit-keyframes anima{
    from { background-position:2000px 0;}
    to {background-position:0px 0;}
}

打字效果

打字效果也就可想而知了，改变容器宽度即可（只能单行使用，还得做到每步增加长度和字母宽度一致，还是js好其实）

.typing{
    width:250px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 3s steps(50, end) infinite;
  animation: type 3s steps(50, end) infinite;
}
 
 
@-webkit-keyframes type{
    from { width: 0;}
}
 
@keyframes type{
    from { width: 0;}
}

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！