过渡效果一般是由浏览器直接改变元素的css属性实现的，例如：使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。当用户鼠标悬停在指定元素之上的时候，浏览器就会响应，直接应用新的属性值。
而CSS过渡特性允许我们控制应用新属性值的速度，使变换效果更为和谐。过渡主要有以下几个属性值：
- transition-delay：指定过渡开始之前的延迟时间
- transition-duration：指定过渡的持续时间
- transition-property：指定应用过渡的属性
- transition-timing-function：指定过渡期间计算中间值的方式
- transition：在一条声明中指定所有过渡细节的简写属性，transition的简写属性格式如下：<property><duration><timing-function><delay>
过渡/反向过渡 效果一览
注：当不设置transition-property的时候默认为发生变化的css属性
: 反向过渡即直接在原CSS属性上添加过渡属性即可，返回初始状态看上去就没那么突兀了
: 刚开始布局页面时浏览器不会应用过渡，这意味着开始显示时就会直接应用相关样式，之后才会通过过渡来应用新样式
动画：CSS动画本质上是增强的过渡。在如何从一种css样式过渡到另一种样式的过程中，可以具有更多选择和更多控制以及更多灵活性。动画主要有以下几个属性：
- animation-delay：设置动画开始前的延迟
- animation-direction：设置动画循环播放的时候是否反向播放
- animation-duration：设置动画播放的持续时间
- animation-iteration-count：设置动画的播放次数
- animation-name：指定动画名称
- animation-play-state：允许动画暂停和重新播放
- animation-timing-function：指定如何计算中间动画值
- animation：简写属性，格式：<name><duration><timing-function><delay><iteration-count>
注：这些属性都不是用来指定要作为动画的CSS属性的。这是因为红花在两部分定义的，第一部分包含在样式声明中，它们定义了哦那规划的样式，但并没有定义哪些属性是动画。第二部分使用@key-frames规则创建，用来定义应用动画的属性。
动画效果一览
注: 动画效果animation-play-state一般不在CSS定义动画的时设为暂停模式，否则不能播 放，一般来说，此属性可能应用于javascript比较好
: 初始值-动画开始时候的状态（和原状态无关）from，50%关键帧。
: animation-direction，动画先向前播放，然后反向播放。相当于animation-iteration-count值为2，但直接设置count值2而不设置animation-direction则无法反向。
: 可在name处设置多个动画属性，用，隔开。
CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用，动画借宿后动画元素的外观回到初始状态，若想让元素的外观保留动画结束时的状态，必须使用过渡；而和多读相比，动画的一个优势是你可以将其应用到页面的初始布局
使用变换：transform属性为元素应用变换，这个属性允许的值是一组预定义的函数：
- translate：在水平方向，垂直方向或者两个方向上平移元素（translateX，translateY）
- scale：在水平方向，垂直方向或者两个方向上缩放元素（scaleX，scaleY）
- rotate：旋转元素
- skew：在水平方向，垂直方向或者两个方向上使元素倾斜一定的角度
- matrix：指定自定义变换。
transform:translate(35px,0px)平移效果
transform:rotate(15deg)旋转效果
transform:scale(1.5)比例缩放效果
transform:skew(0deg,15deg)倾斜效果
注：若transform：rotate()和transform：skew()设置得当，可以达到同样的效果；skew通过二参设置可以看成是（以正中心的x轴线，上下两边的元素以顺时针的比例左右不等距离的相对移动），一参设置（以正中心的y轴线，左右两边的元素以顺时针的比例上下不等距离的相对移动）；trnasform则是整个节点围绕其中心点旋转。设置节点宽度之后效果则较明显
transform-origin：属性指定应用变换的起点，默认情况下，使用元素的中心作为起点。
- <%> 指定元素x轴或者y轴的起点
- <长度值> 指定距离
- left，center，right 指定x轴上的位置
- top，center，bottom指定y轴上的位置
transform-origin:15% 0%起点效果预览
将变换作为动画和过渡处理
transform:rotate(360deg);transition-duration:1000ms效果预览