css3动画

Tansitions支持从一个属性值平滑过渡到另一个属性值

transition:property  duation  timing-function  transition-delay

缺点是：只能指定属性的开始值和终点值，然后在这两个属性之间实现平滑过渡，不能实现更为复杂的动画效果

Animations支持通过关键帧的指定来在页面上产生更复杂的动画效果

div {
      animation-name: diagonal-slide;
      animation-duration: 5s;
      animation-iteration-count: 10;
    }

    @keyframes diagonal-slide {

      from {
        left: 0;
        top: 0;
      }

      to {
        left: 100px;
        top: 100px;
      }

    }