#CSS的不同动画效果

一、transition

废话不多说，上代码

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

上面的代码很简单，鼠标移动到图片上面图片瞬间放大，但是很多时候我们不想这么突兀，怎么办呢？

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}
img{
    transition: 1s 1s height ease;
}

transition派上用场，四个参数分别是，延迟时间，动画时间，哪个属性需要时间变化，如何变化
transition: 1s 1s height ease意思就是，height属性在鼠标放在图片上一名秒后以ease的方式变大，width则是瞬间变大。
第四个属性还可以写成如下几种
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

二、Animation

直接上代码，应该很容易看懂的

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
div:hover {
  animation: 1s rainbow 3;
}

首先@keyframes定义一个动画名称，如上面的rainbow，
animation:1s srainbow 3;就是说这个动画一秒钟完成，动画内容分为两个阶段完成，动画总共重复三次，当然，你可以增加更多的阶段。
想要动画一直不停的重复，只要把3换成infinite
当然Animation有很多属性，完整可参考阮一峰

三、Canvas

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(10,10);//画笔抬起移动到(10,10)
        ctx.linkTo(20,20);//画笔落下划线到(20,20)
        ctx.arc(x, y, r, startAngle, endAngle, anticlockwise);//画圆，xy为圆心，r为半径，接着两个角度，最后顺时针还是逆时针画
        ctx.fill();//填充
        //ctx.stroke();//只有边框
        ctx.fillStyl='red'//填充颜色
        ctx.fillRect(x,y,w,h)
        ctx.strokeStyle='blue'//边框颜色
        lineWidth = value
        fillText(text, x, y [, maxWidth])//绘制填充文本
        strokeText(text, x, y [, maxWidth])//绘制边框文本
        
  }
}
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";//字体
  ctx.fillText("Hello world", 10, 50);
}