css3过渡

Posted 2021-04-09 前端小白学习

过渡 transition

    什么是过渡呢

    过度就是两个状态的一个变化过程

    我们给元素设置css3样式transition后，就会产生过渡，从一个状态到另一个状态，过渡需要我们去触发，才会有效果

简单例子

div { width: 100px; height: 100px; background: #000; transition: background 5s;}/* 给div设置了过渡效果，改变它的背景颜色，时间是5s，我们只要过度需要我们去触发，而且是要两个状态，这里我们设置我们鼠标悬停的时候背景色改变*/div:hover { background: red; /* 这里改变的可以是任意属性*/}

<div></div>

效果展示

过渡的属性

    transition-property

      需要添加过渡效果的属性名

      如果想要所有发生改变的属性都有过渡效果，则可以添加 all

    

    transition-duration

      过渡的总时长

      单位为s ms

      如果为0.x秒，则省略0

    transition-timing-function

      过渡的时间曲线

      http://cubic-bezier.com

      时间曲线有五个原生曲线

      ease  先慢 再匀速最后缓慢结束

      linear

        匀速

      ease-in

        先慢慢进入，达到一定速度后匀速

      ease-out

        先匀速，最后慢慢出去

      ease-in-out

        先慢慢进入，匀速，再慢慢出去

      除了默认曲线外，我们还可以使用自定义曲线公式

      cubic-bezier(0,.65,1,.46) 

      

    transition-delay

      过渡前等待的时间

      既能是正值，也能是负值

        如果是正值，则等待对应的时间再执行动画

        如果是负值，则跳过对应的之间开始对应的动画

    如果把这四个属性合并成一个

      transition: 过渡属性名 过渡时间 过度曲线 过渡前等待时间

        想要有一个transition效果，就必须写属性名 和 时长

    如果想让整个过程都存在过渡效果，需要给整个过程都添加transition

了解完属性值后我们来看下例子

div { width: 100px; height: 100px; background: #000; /* transition: background 1s, width 1s, height 1s; */}/* 这里的过渡杨效果隐藏了，然后下面分贝设置了不同的效果，你们可以注释下面不同的box1和box2的过渡，将这个显示出看效果*/.box1 { transition: all 1000ms -.5s;}.box2 { transition: all 1000ms cubic-bezier(0,1.83,1,-0.85);}/* cubic-bezier(0,1.83,1,-0.85) 是一个过去曲线，可以设置属性里给的默认值，也可以设置这种连接上面也给出了，可以到哪个网址去设置过渡的值然后回来复制*//* s是秒 ms是毫秒*/body:hover div { width: 200px; height: 200px; background: red;}

<div class="box1"></div><div class="box2"></div>

页面展示图

这里过渡效果，需要我们触发才会有效果显示，什么是触发呢

像这里的hover鼠标悬停就是我们主动触发的效果，那么没有过渡的时候，我们看到的效果是一瞬间改变的

感谢阅读与关注，会持续更新哦