【前端】-019-页面制作-CSS-过渡

Transition

定义哪些CSS 属性发生过渡效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及过渡速率 (定义timing funtion)。

• 需要明确定义开始和结束状态，之间的状态由浏览器决定；
• 需要触发事件，没法在网页加载时自动发生；
• 不能重复发生，除非再次触发。

常用属性

1. 设置变化的属性
   transition-property: none | all | property;

   • property为应用过渡效果的CSS属性名称

2. 规定完成过渡效果需要花费的时间
   transition-duration: <time>

3. 规定在过渡效果开始之前需要等待的时间
   transition-delay: <time>;

4. 规定过渡效果的速度曲线
   transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

   • transition-timing-function

注意事项

1. 可设置动效的属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
2. http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html