前端如何写动画 css3 svga

通常，前端实现动画的方案主要有6种：CSS3 transition、CSS3 animation、Canvas动画、SVG动画、Javascript实现、requestAnimationFrame。

如果是复杂的动画（前端可能会写好几天 太麻烦了 个人推荐svga）

svga

github地址：github-svga

svga动画优点:
高效，终端只需要继承这套方案框架，把动画实现交给动画设计师即可。
高性能，在实现酷炫动画的基础上，播放性能表现优于Gif和WebP。
动画文件小，同样的动画效果，SVGA文件要比Gif和WebP的文件小得多。

使用 player.setImage('http://yourserver.com/xxx.png', 'ImageKey'); 替换掉其中想要替换的图片（当然动画效果还是不变的欧 简单还好用）

css3（用的比较多比较简单）

动画过渡 transition

Transition是一个复合属性，包含一下几个子属性：

Transition-property:指定过渡或动态模拟的CSS属性：

Transition-duration:指定过渡完成所需的时间；

Transition-timing-function:指定过渡函数；

Transition-delay:指定开始出现的延迟时间；

（1）transition-property

具有过渡动画的CSS属性有：

注意：当transition-property的属性值为all时，表示的是所有初始状态设置了

样式的属性；

（2）transition-duration

该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间；

（3）transition-timing-funtion

即“缓冲函数”，指过渡效果的时间曲线，包括以下几种：

（4）transition-delay

设置一个动画开始执行的是时间：

Transition:transition-property transition-duration transition-timing-function transition-delay;

Keyframes & animation

1.keyframes(关键帧)

计算机动画术语，帧—就是动画中最小单位的单幅影像画面，相当于电影胶片

上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。

关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡或者中间帧。其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

关键帧的创建：

0%和100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；

0%和100%可以使用关键词from和to来表示。

2、animation 动画

Animation为复合样式，包含以下子属性：

（1）animation:animation-name;(调用动画)

（2）animation-duration(动画播放时间)

（3）animation-timing-function(动画播放方式)，同tranition动画过渡；

（4）animation-delay(动画开始播放时间)

（5）animation-iteratin-count(动画播放次数)

两个值：

Infinite(无限)；n(具体次数)

（6）animation-direction(动画播放方向)

两个值：

Normal 每次循环都是向前播放；

Alternate 奇数次向前播放，偶数次反方向播放；

（7）animation-play-state(动画播放状态)

两个值：running & paused

Running类似于音乐播放器，paused是将播放的动画停下来；

Running将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。

（8）animation-fill-made (动画时间外属性)

四个值：

None:默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；

Forwards:动画结束后应用最后的关键帧；

Backwards:元素应用动画样式是迅速应用动画的初始帧，主要体现在动画开始之前；

Both:同时具有forwards和backwards的效果，即开始前会应用初始帧，结束后会继续应用最后的关键帧；

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比（from相当于0% to相当于100%），分别给每个百分比中给需要有动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

JS动画（可能因为框架不通或者每个工程师的想法不同写js动画）