HTML5中2D动画如何设置？

1、通过控制css属性来达到动画的目的，@kefframes

在css中通过定义一个@keyframes 运动效果的名称，然后再通过animation来调用运动效果的名称实现动画

第一步：

@keyframes animation{     from{   background:red;   }  30%{   background:blue;   } to{ background:yellow }    };

第二部

在css文件中找到需要调用动画参数的元素，设置：

animation-name:change;    //设置动画名称

animation-duration：3s   //设置动画时间周期

animation-iteration-count:6  //设置动画循环次数

animation-iteration-count:infinite;设置动画无限循环

---

2、线性渐变

background：linear-gradient(to right,blue,red，yellow);

to right可以是35deg，或者是to bottom，颜色可以写多个

background:liner-gradient(red 30%,green30%,yellow 60%);

可以设置百分百，百分比代表颜色相对于元素的百分比位置，而不是颜色占比

---

3、经向渐变

background:radial-gradient(cricle,red,blue,yellow);

cricle是设置渐变以圆型扩散

background:radial-gradient(at 30px 40px,red,blue,yellow);

at是设置经向渐变时圆心的位置（相对于元素）；

background:radial-gradient( 100px 30px,red,blue,yellow);

不写at直接写数字，是代表横轴渐变和纵轴渐变的大小

---

4、transfrom属性（变换）

位移：

transfrom:translate(100px,100px);

横向和纵向移动100px的距离，可以为负值

旋转：

transfrom:rotate(45deg);

默认围绕Z轴旋转45度

transfrom-origin:top left;

transfrom:rotate(80deg);

围绕左上角旋转80度。

缩放：

transfrom:scale(1.5);

元素放大1.5倍

倾斜：

transfrom:skew(45deg);

沿x轴倾斜45度