css hover怎样延迟加载

html-css018

css hover怎样延迟加载,第1张

.class{

    opacity:0

}

.class:hover{

    animation:ttt 3s 1 forwards /*这里的3s表示总动画长3秒，其它属性感兴趣自己去查，反正主要就是那个3s*/

}

@keyframes ttt {

    0%{

        opacity:0

    }

    66%{ /*这里表示3s的66%也就是大约2秒的时候*/

        opacity:0

    }

    100%{

        opacity:1

    }

}

最终就会前2秒没变化，然后才开始执行了

下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位

<div class="demo1">我是黎明</div>

      <div class="demo2">我是黎明</div>

      <style>

        .demo1{transition: 1s}

        .demo1:hover{margin-left:30px}

        .demo2:hover

        {

        animation: myfirst 1s

        -moz-animation: myfirst 1s /* Firefox */

        -webkit-animation: myfirst 1s  /* Safari 和 Chrome */

        -o-animation: myfirst 1s /* Opera */

        }

        @keyframes myfirst{

          0% {margin-left: 0px}

          50% {margin-left: 30px}

          100% {margin-left: 0px}

        }

        @-moz-keyframes myfirst /* Firefox */

        {

          0% {margin-left: 0px}

          50% {margin-left: 30px}

          100% {margin-left: 0px}

        }

        @-webkit-keyframes myfirst /* Safari 和 Chrome */

        {

          0% {margin-left: 0px}

          50% {margin-left: 30px}

          100% {margin-left: 0px}

        }

        @-o-keyframes myfirst /* Opera */

        {

          0% {margin-left: 0px}

          50% {margin-left: 30px}

          100% {margin-left: 0px}

        }

      </style>

css的执行方法是设置延迟函数

第一个设置1s

 transition-duration：1s

第二个设置第一个执行完成的函数时间假设第一个需要5s+开始时间1s

 transition-duration:6s

jq就用回调函数