锐客网

  1. 首页 > 睿知 > it技术 > >

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

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

  • 需要明确定义开始和结束状态，之间的状态由浏览器决定；
  • 需要触发事件，没法在网页加载时自动发生；
  • 不能重复发生，除非再次触发。
常用属性
  1. 【【前端】-019-页面制作-CSS-过渡】设置变化的属性
    transition-property: none | all | property;
    • property为应用过渡效果的CSS属性名称
  2. 规定完成过渡效果需要花费的时间
    transition-duration:
  3. 规定在过渡效果开始之前需要等待的时间
    transition-delay: ;
  4. 规定过渡效果的速度曲线
    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
    • 【前端】-019-页面制作-CSS-过渡
      文章图片
      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

    推荐阅读


    上一篇：海口市民政局?关于“五一”小长假期间街面?流浪乞讨人员救助管理联合督导工作情况报告

    下一篇：384.|384. Shuffle an Array