动画(杂记)

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动画，使用animate

元素并不适用于旋转、平移、缩放或倾斜变换，因为它们都“被包裹”在 transform 属性内。 元素就是用来解决这个问题的。我们可以设置它的 attributeName 为 transform。然后用 type 属性的值指定变换的哪个值应该变化（translate、scale、rotate、skewX 或者 skewY 之一）。from 和 to 的值指定为适当的要动画绘制的变换。使用svg animation做动画:

鼠标hover的动画

  Cat



  
  
  

鼠标点击动画

     ➊
  
  Start



  

       ➋
  

监听鼠标动作

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 */
} 

所有属性与解释：

可以使用以下现成的css3的库
（1）animate.css
https://animate.style/
（2）magic.css
https://www.minimamente.com/p...
(3)hover.css
http://ianlunn.github.io/Hover/
(4)csshake
https://elrumordelaluz.github...
(5)tailwindcss(布局)
https://tailwindcss.com/
(6)normalize.css(重置初始化)
https://github.com/necolas/no...