前端常见面试题：动画属性，svg和canvas的区别

一.css动画属性：
1.animation-name 动画名称。和keyframes名称一致。
2.animation - duration 动画持续时间
3.animation - delay 动画延迟时间
4.animation-timing-function 动画运动轨迹
5.animation-iteration-count 动画运动次数 infinite 无限循环
6.animation - direction 动画方向
alternate 先正向再反向
二.canvas和svg的区别：
svg定义：
1.可伸缩的矢量图形
2.是基于xml进行绘制图形
3.svg放大或者改变尺寸情况下图形质量不会有损。
canvas定义:
1.h5新增属性
2.基于js进行绘制图形
两者区别：
从时间上看：canvas是h5新增特性，svg被运用比较久远。
从功能上看：svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。
从应用上比较：
canvas不依赖分辨率，svg依赖分辨率。
canvas支持事件处理器，svg不支持。
canvas适用于大型渲染区域区域程序（比如谷歌地图），svg适用于图像密集型游戏。