过渡 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
