opacity visibility display 以及 transition 和 animation 的异同

Question

opacity visibility display 有什么差别

opacity 和 visibility 会仍旧占据空间，display 没有

opacity 会有事件 和 taborder，visibility 和 display 没有

transition 和 animation 有什么区别

共同点

• 对某些特性进行监听设置时间从某个值变化到另一个值
• 有持续时间
• 带来可视化的样式改变
• 能够通过代码来监控进程

区别

• transition 可以通过用户行为触发 animation 则没有
• transition 一次性 animation 则可以循环
• transition 是点到点的状态变化 animation 则是可以定义多个 frame
• transition 可以通过 JS 比较方便操控属性改变，animation 则比较麻烦