1、svg
SVG元素是DOM元素的一种类型，它借用了咱们已熟知的HTML元素的写法来定义任意图形。SVG元素与HTML元素的不同之处在于它们具备特有的标签、属性和行为，能够用来定义图形。换言之，SVG使你可能用代码创立图片。这一概念无比弱小，起因在于这意味着你能够应用JavaScript和CSS，以编程的形式为这些图形增加款式和动画。另外，SVG还具备很多其余长处。
- SVG的压缩性异样的好。用SVG定义的图形比同样的PNG/JPEG图片要小，这能够极大地缩短网站加载工夫。
- SVG图形能够缩放至任意分辨率并且不损失清晰度。与其余规范图片格式不同，它在所有设施上都边缘清晰，该是向挪动设施屏幕上的那些含糊的图片说再见的时候了。
- 就像HTML元素一样，你能够为SVG元素指定一个事件句柄，响应用户的输出。这意味着页面上的图片也能够具备交互性。如果你乐意，能够把网站上所有的按钮都换成动静图形。
- 许多照片编辑利用（包含Adobe Photoshop、Sketch和Inkscape）都能够将设计作品导出成SVG格局，能够间接复制粘贴到HTML当中。因而，即便你自认不是个艺术家，也能够借助第三方利用来本人做设计。
svg根本应用
<svg width="500" height="500"> <circle cx="100" cy="100" r="100" style="fill:blue;stroke:yellow;stroke-width:5px;"/> <rect id="rect" x="200" y="200" width="200" height="200"/></svg>svg动画，应用animate
<rect x="10" y="10" width="20" height="20" style="stroke: black; fill: green; style: fill-opacity: 0.25;"> <animate attributeName="width" attributeType="XML" from="20" to="200" begin="0s" dur="8s" fill="freeze"/> <animate attributeName="height" attributeType="XML" from="20" to="150" begin="0s" dur="8s" fill="freeze"/> <animate attributeName="fill-opacity" attributeType="CSS" from="0.25" to="1" begin="0s" dur="3s" fill="freeze"/> <animate attributeName="fill-opacity" attributeType="CSS" from="1" to="0.25" begin="3s" dur="3s" fill="freeze"/></rect><animate> 元素并不适用于旋转、平移、缩放或歪斜变换，因为它们都“被包裹”在 transform 属性内。<animateTransform> 元素就是用来解决这个问题的。咱们能够设置它的 attributeName 为 transform。而后用 type 属性的值指定变换的哪个值应该变动（translate、scale、rotate、skewX 或者 skewY 之一）。from 和 to 的值指定为适当的要动画绘制的变换。应用svg animation做动画:
<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="#979797" stroke-width="1" fill="none"> <path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 ..." ></path> </g> <g id="cray" transform="translate(0, -24)" stroke="#979797"> <image id="cray-img" xlink:href="1.png" x="0" y="0" width="100px"/> </g> <animateMotion xlink:href="#cray" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto-reverse" > <mpath xlink:href="#motionPath" /> </animateMotion></svg>鼠标hover的动画
<style type="text/css"><![CDATA[ a.words:hover, a.words:focus { text-decoration: underline; font-weight: bold; } a.shapes:hover, a.shapes:focus { stroke: #66f; stroke-width: 2; outline: none; /* 笼罩默认的聚焦款式 */ } ]]></style><a class="words" xlink:href="cat.svg"> <text x="100" y="30" style="font-size: 12pt;">Cat</text></a><a class="shapes" xlink:href="http://www.w3.org/SVG/"> <circle cx="50" cy="70" r="20" style="fill: red;"/> <rect x="75" y="50" width="40" height="40" style="fill: green;"/> <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/></a>鼠标点击动画
<g id="button"> ➊ <rect x="10" y="10" width="40" height="20" rx="4" ry="4" style="fill: #ddd;"/> <text x="30" y="25" style="text-anchor: middle; font-size: 8pt">Start</text></g><g transform="translate(100, 60)"> <path d="M-25 -15, 0 -15, 25 15, -25 15 Z" style="stroke: gray; fill: #699;"> <animateTransform id="trapezoid" attributeName="transform" type="rotate" from="0" to="360" begin="button.click" dur="6s"/> ➋ </path></g>监听鼠标动作
<circle id="circle" cx="50" cy="50" r="20" style="fill: #ff9; stroke:black; stroke-width: 1"/><script type="application/ecmascript"><![CDATA[ function grow(evt) { var obj = evt.target; obj.setAttribute("r", "30"); } function shrink(evt) { this.setAttribute("r", "20"); } function reStroke(evt) { var w = evt.target.style.getPropertyValue("stroke-width"); w = 4 - parseFloat(w); /* toggle between 1 and 3 */ evt.target.style.setProperty("stroke-width", w, null); } var c = document.getElementById("circle"); c.addEventListener("mouseover", grow); c.addEventListener("mouseout", shrink); c.addEventListener("click", reStroke); // ]]></script>2、canvas动画
3、css3动画
CSS3 转换能够对元素进行挪动、缩放、转动、拉长或拉伸。次要是在元素上设置这两个元素，transform 和 transform-origin。
变换的办法次要有以下几种：
- translate(x,y) 依据左(X 轴)和顶部(Y 轴)地位给定的参数，从以后元素地位挪动
- rotate(angle) 在一个给定度数顺时针旋转的元素。负值是容许的，这样是元素逆时针旋转。
- scale(x,y) 该元素减少或缩小的大小，取决于宽度（X 轴）和高度（Y 轴）的参数：
- skew(x-angle,y-angle) 定义 2D 歪斜转换，沿着 X 和 Y 轴。
过渡
动画
@keyframes 规定是创立动画。@keyframes 规定内指定一个 CSS 款式和动画将逐渐从目前的款式更改为新的款式。
示例：
@keyframes myanimation { from {background: red;} to {background: yellow;}}div{ animation: myanimation 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */} 所有属性与解释：