# css知识总结

1. 浏览器渲染原理

    渲染树构建,布局,绘制----谷歌团队文章

    渲染树图解

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

    transtion四个属性

    * 位移 translate

    * 缩放 scale

    * 旋转 rotate

    * 倾斜 skew

    注:使用方法看mdn语法

---

    animation方法

    * CSS animation 属性

        animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

        例子:animation: 3s ease-in 1s 2 reverse both paused slidein;

    * 动画写法

        @keyframes slidein {

  from {

    transform: translateX(0%);

  }

  to {

    transform: translateX(100%);

  }

}

    * 动画写法(2)

        @keyframes identifier {

  0% { top: 0; left: 0; }

  30% { top: 50px; }

  68%, 72% { left: 50px; }

  100% { top: 100px; left: 100%; }

}

3. 我的一点css想法

    多实践css,结果导向过程.css是一个不成交的语言所以不要用逻辑思考问题(多测试就好)