CSS动画

过渡 transition

transition-delay: 指定过渡开始之前的延迟时间。(1000ms)
transition-duration: 指定过渡的持续时间。(1000ms)
transition-property: 指定过渡的属性。(属性1, 属性2, ...)
transition-timing-function:指定过渡期间计算中间值的方式。

1、ease默认属性
2、ease-in 
3、ease-out
4、ease-in-out
5、linear （体验上最为流畅）
各自对应不同的函数曲线

transition：过渡细节的简写属性(property duration timing-function delay)

动画 animation

动画本质上是增强的过渡。
animation-delay: 动画开始前的延迟。1000ms
animation-direction: 是指动画循环播放的时候是否反向播放。

1、normal播放完毕回到初始状态，每次重复播放都是向前播放。
2、alternate先向前播放，之后反向播放。

animation-duration: 动画持续的时间。
animation-itera-count: 设置动画的播放次数。
animation-name: 指定动画的名称。
animation-play-state: 允许动画暂停和重新播放。

1、pause动画就会停止
2、playing动画就会开始

animation-timing-function: 指定如何计算中间动画值。
animation: 简写属性。(name duration timing-function delay iteration-count)

#banana:hover {
    -webkit-animation-delay: 1000ms;
    -webkit-animation-duration: 250ms;
    -webkit-animation-iteration-count: infinite(无限循环)/循环次数);
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: "AnimationName";
}

@(-webkit-)keyframes AnimationName {//-webkit- 浏览器厂商前缀
    from {//设置初始状态
        font-size: xx-small;
        background-color:red;
    }
    50% {
        font-size:small;
        background-color:yellow;
    }
    to {
        font-size:xxlarge;
        background-color:red;
    }
}

对动画结束状态的理解：CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用。动画结束后，动画元素的外观回到初始状态。
跟过渡相比的一个优势，可以讲动画应用到初始化布局。
为多个元素应用多个都个动画：

#animation1, #animation2 {
    动画设置
}

@-webkit-keyframes AnimationName1 {
    to {
        设置属性
    }
}

@-webkit-keyframes AnimationName2 {
    to {
        设置属性
    }
}

变换 transfrom

我们可以使用CSS为元素应用线性变化，也就是说你可以旋转、缩放、倾斜和平移元素。
transform：指定应用的变换功能。

translateX
translate 水平方向、垂直方向或两个方向平移元素。(长度值/百分值)
translateY

scaleX
scale 在水平方向、垂直方向或者两个方向上缩放元素。(数值)
scaleY

rotate旋转元素(角度)

skewX
skew 在水平方向、垂直方向或者两个方向上使元素倾斜一定角度。（角度）
skewY

transform-origin：指定变换的起点。默认情况使用中心点作为起点。

left
center 指定x轴上的位置
right

top
center 指定y轴上的位置
bottom