第八章 动画基础 过渡 transition

第八章 动画基础 过渡 transition

在早期的web开发中，要实现动画效果，都是依赖JS或Flash。
CSS3中引入了一个新的模板transition，可通过CSS事件触发元素外观改变，
这些事件包括鼠标单击事件，获得焦点事件，被点击，对元素改变。

CSS3中要实现动画过渡需要以下步骤：
1.在默认样式中声明元素的初始状态。
2.声明过渡元素的最终状态
3.在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的动画过渡是一个复合属性，主要包括一下几个属性：
transition-property： 指定需要过渡的状态
transition-duration： 完成过渡需要的时间
transition-timing-function: 过渡函数，即过渡方式
transition-delay：指定开始过渡的延迟时间，即等待多久开始过渡。

过渡属性 transition-property：
可以过渡的属性有：
background-color background-position

border-color border-width border-spacing

margin padding

width height color z-index opacity

font-size font-weight letter-spacing line-height text-indent

text-shadow vertical-align word-spacing

例：
div{transition: background-color .5s ease .1s; background-color:yellow}
div:hover{background-color:black;}

注意：当transition-property的值是all时，若最终状态包含这几个属性，则这几个属性都同时变化。


过渡方式 transition-timing-function：
ease：速度由快到慢
linear：恒速
ease-in：越来越快
ease-out：越来越慢
ease-in-out：先加速，后减速