过度及动画

过渡与动画

一、过渡

1、过渡属性

<!-- 过度:从一个状态以动画方式变成另一种状态的这种变化过程就叫做过度 -->
<!-- 过度效果通过hover产生,可以制作一个hover层 -->
<!-- hover层处理方式:与显示层同等区域大小 -->
<!-- 同样可以将显示层的位置交于hover层处理 -->

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

① transition-property 属性 表示可过渡的样式属性 transition-property: all | [css1 [...]]; ​ ② transition-duration 属性 表示过渡持续时间 transition-duration: <time>; ​ ③ transition-delay 属性 表示过渡延迟时间 transition-delay: <time>; ​ ④ transition-timing-function 属性 表示过渡运动曲线 transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier(); -- linear：匀速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 ​ ⑤ transition 属性 表示前四个属性整体赋值 transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;

　　

二、动画

1、动画属性

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

① animation-name 属性 表示动画名(名字任意起) animation-name: <name>; ​ ② animation-duration 属性 表示动画持续时间 animation-duration: <time>; ​ ③ animation-delay 属性 表示动画延迟时间 animation-delay: <time>; ​ ④ animation-timing-function 属性 表示动画运动曲线 animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier(); -- linear：匀速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 ​ ⑤ animation-play-state 属性 表示动画状态 animation-play-state: running | paused -- running：运行 -- paused：暂停 ​ ⑥ animation-fill-mode 属性 表示动画结束后的停留位置 animation-fill-mode: forwards | backwards -- forwards:终点 -- backwards:起点 ​ ⑦ animation-iteration-count 属性 表示动画次数 animation-iteration-count: <count> | infinite -- <count>：固定次数 -- infinite：无限次 ​ ⑧ animation-direction 属性 表示运动方向 animation-direction: normal | alternate | alternate-reverse; -- normal：原起点为第一次运动的起点，且永远从起点向终点运动 -- alternate：原起点为第一次运动的起点，且来回运动 -- alternate-reverse：原终点变为第一次运动的起点，且来回运动

　

2、动画体

?

1 2 3 4 5 6 7 8 9 10 11

@keyframes <name>{     /*from未写任何属性设置时，默认全部取初始值（初始状态）*/     from{}     to{} } ​ @keyframes <name>{     0% {}     ...     100% {} }

v_hint：动画属性设置给指定选择器标签，动画体在样式中单独设置