CSS动画、JS动画优缺点

CSS动画、JS动画优缺点

CSS动画

css动画使元素从一种样式逐渐转变为另一种样式。css动画有3种实现方式，transition实现渐变动画；transform转变动画；animation实现自定义动画。

（一）transition有4种属性，分别为：

1. transition-property
   规定设置过渡动画的属性，如width，height等

2. transition-duration
   设置动画执行一个周期的时间

3. transition-timing-function
   规定动画执行的速度曲线

4. transition-delay
   设置动画开始之前延迟时间

（二）translate设置旋转、缩放等，由于属性较多且大部分使用较少，这里只列出使用比较多的4种：

1. translate(x,y)转换
2. scale(x,y)缩放
3. rotate(x,y)旋转
4. skew(x,y)倾斜

（三）自定义动画有以下10种属性，分别为：

1. @keyframes
   规定动画变换的规则，通过使用关键字 “from” 和 “to”（或 0％和 100％）设置样式何时改变怎样改变
2. animation
   此属性设置所有动画的简写
   {animation: animation-name animation-duration aniamtion-timing-function animation-iteration-count animation-direction; }
3. animation-delay
   设置动画开始之前延迟时间
4. animation-duration
   规定动画在相应时间完成一个周期
5. animation-direction
   设置动画执行的方向，有4个值，分别为：normal - 动画正常播放（向前）。默认值；reverse - 动画以反方向播放（向后）；alternate - 动画先向前播放，然后向后
   alternate-reverse - 动画先向后播放，然后向前
6. animation-name
   规定@keyframes的名称，并相应元素中引用这个动画
7. animation-iteration-count
   设置动画执行的次数，infinite表示永远
8. animation-timing-function
   规定动画执行的速度曲线，有6个值，分别为：ease - 慢快慢（默认）；linear - 匀速；ease-in - 慢开始；ease-out - 慢结束；ease-in-out - 开始和结束都慢；cubic-bezier(n,n,n,n) - 执行三次贝塞尔函数中的值
9. animation-fill-code
   规定元素在不播放动画时的样式，有5个值，分别为：none - 默认值；
   forwards - 元素将保留由最后一个关键帧设置的样式值；backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
   both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
10. animation-play-state
    设置动画暂停或执行，有2个值，分别为：paused-暂停；running-正在播放

CSS动画的优缺点

优点

1. css动画比较流畅（css动画把所有DOM操作集中起来，只进行一次重绘或回流,渲染时不会触发主线程）

缺点

1. css动画不具有兼容性，IE9及其以下浏览器无法使用
2. css动画代码比较冗余
3. 无法绑定事件回调函数（只能简单规定的动画）

JS动画

js动画是利用js代码，为元素绑定事件函数，以此实现多种动画样式

优点

1. 可以实现复杂效果
2. 用js代码做兼容，通用各个浏览器

缺点

1. 代码量庞大
2. 执行时在主线程中运行，主线程中同时可能还有其他的js脚本，样式布局，绘制任务等，可能导致线程出现阻塞，造成丢帧的情况。

问题：css动画、js动画的优缺点有哪些？
知识点：transition、transform、animation动画、js动画