css过渡

2019-06-21  本文已影响0人  皇甫圣坤
div {
          background: #000;
          transition: background 1s;
      }

      div:hover {
          background: red;
      }
 /* 
    transition-property
        需要添加过渡效果的属性名 all:所有属性
    transition-duration
        过渡的总时长
    transition-timing-function
        过渡的时间曲线
      ease   慢 匀速 缓慢结束
      linear   匀速
      ease-in   慢慢进入  匀速
      ease-out   匀速 慢慢出去
      ease-in-out   慢慢进入 匀速 慢慢出去
      自定义曲线公式  cubic-bezier(0,.65,1,.46)
    transition-delay
        过渡的延迟时间
        正直等待对应的时间在执行动画
        负值则是跳过对应的时间开始动画
     */

时间曲线:百度、贝塞尔曲线可视化

上一篇下一篇

猜你喜欢

热点阅读