transition:过渡动画

transition:过渡动画

1）常规用法：
​ transition-property
​ transition-duration
​ transition-timing-function
​ transition-delay
​ 2）简洁（复合）用法：
​ transition: property-name-list|all duration timing-function delay;

a）可以使用的属性有：
​ i)颜色：
​ color background-color border-color outline-color
​ ii)位置：
​ background-position left right top bottom
​ iii)长度：
​ max-height min-height max-width min-width height width
​ border-width margin padding outline-width outline-offset
​ font-size line-height text-indent vertical-align
​ border-spacing letter-spacing word-spacing
​ iv)数字：
​ opacity visibility z-index font-weight zoom
​ v)组合：
​ text-shadow transform box-shadow clip
​ vi)其它
​ gradient

b)duration:动画持续时间，一般以秒(s)或毫秒(ms)为单位
​ c)timing-function:动画函数
​ i)linear:匀速
​ ii)ease:变速（先慢后快，最后再慢）
​ iii)ease-in:变速（由慢到快）
​ iv)ease-out:变速（由快到慢）
​ v)ease-in-out:变速（慢速开始，慢速结束）
​ vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
​ d)delay:动画延时时间，一般以秒(s)或毫秒(ms)为单位

2.关键帧动画

步骤：
​ 1）设置关键帧
​ a)如果只有两个关键帧
​ @keyframes 动画名 {
​ 0%:{样式表}
​ 100%:{样式表}
​ }
​ 或：
​ @keyframes 动画名 {
​ from:{样式表}
​ to:{样式表}
​ }
​ b)如果是多个关键帧
​ @keyframes 动画名 {
​ 0%:{样式表}
​ 25%:{样式表}
​ 60%:{样式表}
​ …
​ 100%:{样式表}
​ }
​ 注意：这里的百分比一般是升序值，可以是0%-100%之间的做任意值，也可以是倒序。
​ 2）实施动画
​ a)常规用法
​ animation-name：来自于@keyframes定义的动画名
​ animation-duration：动画持续时间，一般以秒(s)或毫秒(ms)为单位（默认为0）
​ animation-timing-function：动画函数
​ i)linear:匀速（默认值）
​ ii)ease:变速（先慢后快，最后再慢）
​ iii)ease-in:变速（由慢到快）
​ iv)ease-out:变速（由快到慢）
​ v)ease-in-out:变速（慢速开始，慢速结束）
​ vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
​ animation-delay：动画延时时间，一般以秒(s)或毫秒(ms)为单位
​ animation-iteration-count：动画循环播放的次数
​ 1)number：按设定次数循环播放（默认次数为1次）
​ 2)infinite：一直循环播放
​ animation-direction：动画播放完后是否反向播放
​ 1）normal:不反向（默认值）
​ 2）alternate:反向
​ animation-play-state：动画播放或停止播放
​ 1）paused:停止播放
​ 2）running:播放（默认值）
​ b)简洁用法
​ animation:name duration timing-function delay iteration-count direction;