CSS没有为什么，没有对错，只要能达到想要的效果即可。

浏览器渲染流程

1. 解析 HTML 文本构建 DOM tree
2. 解析 CSS 样式构建 CSSOM tree
3. 根据 DOM tree 和 CSSOM tree 构建 Render tree
4. 根据 Render tree 信息进行布局处理（Layout）
5. 对页面元素进行绘制（Painting）

CSS 动画的两种做法（transition 和 animation）

transition实例（动作触发，一次性动画）

.ball{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
  transform: translate(200px,0);
  transition: 1s linear;
}
.ball:hover{
  transform: translate(0,0);
}

animation实例（随时触发，可控性很强）

 .ball {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: #f69;
    animation: move 2s linear;
  }

  @keyframes move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(200px, 0);
    }
  }