css3---Transitions, Transforms和Animation

一.transition: 过渡效果

属性:

1. transition-property 规定设置过渡效果的 CSS 属性的名称。
2. transition-duration 指定这个过渡的持续时间
3. transition-timing-function 延迟过渡时间
4. transition-delay 指定过渡动画缓动类型
   有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
   其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

联合写法: transition: all 1s ease-out

二.transform: 变化

transform就是指的这个东西，拉伸，压缩，旋转，偏移

常用的:

translate 偏移
scale 缩放
rotate 旋转
skew 倾斜

联合写法: transform:rotate(720deg) scale(2,2) // 边旋转, 边放大

transform-origin: 改变元素基点的位置(默认以元素的中心为基点)

    /* 以右上角开始放大 */
    .content:hover .box1{
      opacity: 1;
      filter: Alpha(opacity=100);
      transform: scale(1, 1);
      transform-origin:top right; 
    }

三.animations