transition 和 animation 的区别+visibility=hidden, opacity=0，display:none 区别+画一条 0.5px 的线

1.transition 和 animation 的区别

1、animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。
transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行，只能触发一次；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，
而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等
transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，
但是 transition 只有两帧，从 from … to；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

补充：css动画和js动画的区别

代码复杂度方面：
简单动画，css 代码实现会简单一些，js 复杂一些。
复杂动画的话，css 代码就会变得冗长，js实现起来更优。

动画运行时：
对动画的控制程度上，js 比较灵活，能控制动画暂停，取消，终止等；
css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。

性能方面：
css动画相对于优一些，css 动画通过GUI解析；
js 动画需要经过j s 引擎代码解析，然后再进行 GUI 解析渲染。

css 有浏览器兼容问题，js 大多情况下是没有的。

2.visibility=hidden, opacity=0，display:none 区别

• opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些
  事件，如 click 事件，那么点击该区域，也能触发点击事件的
• visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• display=none把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

3.怎么画一条 0.5px 的线

有两种方法

.line {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%; //scaleY Chrome/Safari的线都变虚了，加上就不会了
}

在移动端

<meta name="viewport" content="width=device-width,initial-sacle=1">

其中width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。默认的缩放比例为1，如iphone 6竖屏的宽度为750px，它的dpr=2，用2px表示1px，这样设置之后viewport的宽度就变成375px。这时候0.5px的边就使用我们上面讨论的方法。

这样的话，viewport的宽度就是原本的750px，所以1个px还是1px，正常画就行，但这样也意味着UI需要按2倍图的出，整体面面的单位都会放大一倍。

在iPone X和一些安卓手机等dpr = 3的设备上，需要设置scale为0.333333，这个时候就是3倍地画了。