欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3 animation

程序员文章站 2024-03-24 12:08:22
...

简单使用

 @keyframes run {
      0% {
        left: 0;
        top: 0;
      }

      25% {
        left: 100px;
        top: 0;
      }

      50% {
        left: 100px;
        top: 100px;
      }

      75% {
        left: 0;
        top: 100px;
      }

      100% {
        left: 0;
        top: 0;
      }
    }

    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      animation:run 4s;
    }

参数解释

animation-name 定义的关键帧名
animation-duration 动画的总时间 动画执行完会返回到原有状态
animation-timing-function 定义的是动画每一段的运动状态
animation-delay 延迟
animation-iteration-count 执行几次,第二次开始没有延迟
animation-direction : reverse 会倒着执行 alternate 先正着执行一次然后倒着执行(需要执行次数大于2)
animation-play-state running、paused 控制暂停 (少用,可能会有错误行为)
animation-fill-mode forwards 运动完后会保存最后一帧的状态 backwards 动画开始前就是第一帧的状态(delay) both 两者的结合(使用的比较多)

keyframes

0%可以写为from
100%可以写为to
其他的没有可替换的写法
兼容性问题:过渡版本的浏览器要加前缀名

demo演示

  <style>
    body {
      background-color: #000;
    }

    @keyframes space-change {
      from {
        opacity: .3;
      }

      25% {
        opacity: 1;
      }

      50% {
        opcity: .3;
      }

      75% {
        opacity: .1;
      }

      to {
        opacity: .3;
      }
    }

    @keyframes sunrise {
      from {
        opacity: 0;
      }

      10% {
        opacity: 1;
        transform: scale(.7, .7) translateX(0) translateY(0)
      }

      30% {
        opacity: 1;
        transform: scale(.5, .5) translateX(0) translateY(-500px)
      }

      50% {
        opacity: 0;
        transform: scale(.7, .7) translateX(400px) translateY(0)
      }

      to {
        opacity: 0;
      }
    }

    @keyframes moonrise {
      from {
        opacity: 0;
        transform: translateY(0);
      }

      30% {
        opacity: 0;
        transform: translateY(0);
      }

      50% {
        opacity: 0;
      }

      70% {
        transform: translateY(-300px);
        opacity: 1;
      }

      80% {
        transform: translateY(-300px);
        opacity: 1;
      }
      90%{
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 0;
      }
    }

    .space {
      height: 500px;
      background-image: linear-gradient(to bottom, rgba(0, 130, 255, 1), rgba(255, 255, 255, 1));
      animation: space-change 10s cubic-bezier(.5, 0, .5, 1) infinite;
    }

    .sun {
      position: absolute;
      left: calc(50% - 25px);
      top: calc(50% - 25px);
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      transform: scale(.5, .5);
      box-shadow: 0px 0px 50px 50px #fff,
        0px 0px 100px 125px #ff0;
      animation: sunrise 10s infinite;
    }

    .moon {
      position: absolute;
      left: calc(50% + 400px);
      top: calc(50% - 50px);
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 50%;
      box-shadow: 0px 0px 8px #fff, inset 0px 0px 8px #000;
      animation: moonrise 10s cubic-bezier(0, 0, .5, .5) infinite;
    }

    .moon::after {
      position: absolute;
      content: "";
      width: 90px;
      height: 90px;
      background-color: #000;
      border-radius: 50%;
      left: -10px;
      top: -10px;
    }
  </style>
</head>

<body>
  <div class="space"></div>
  <div class="sun"></div>
  <div class="moon"></div>
</body>

step animation

animation-timing-function的属性
steps(int,start\end)
每一段动画以多少步实现 第二个指定每一步的值发生变化的时间点
end (比较常用)
保留当前帧状态,直到这段动画时间结束
用forwards可看到最后一帧
start
保留下一帧状态,直到这段动画时间结束

不常用原因:忽略第一帧的效果 不好弥补
backwards需要有延迟时间
特殊值
steps(1,end)===step-end
steps(1,start)===step-start

step完成的三大例子

打字效果

 <style>
     @keyframes cursor{
    0%{
        border-left-color: rgba(0,0,0,0);
    }
    50%{
        border-left-color: rgba(0,0,0,1);
    }
    100%{
        border-left-color: rgba(0,0,0,0);
    }
}

@keyframes cover{
    0%{
        left:0;
    }
    100%{
        left:100%;
    }
}

div{
    position: relative;
    display: inline-block;
    height:100px;
    font-size:80px;
    line-height: 100px;
    font-family: monospace;
}


div::after{
    content:"";
    position: absolute;
    left:0;
    top:10px;
    height:90px;
    width:100%;
    background-color: #fff;
    border-left:2px solid black;
    box-sizing:border-box;
    animation:cursor 1s steps(1, end) infinite, cover 12s steps(12, end);
}
    </style>
</head>

<body>
    <div>laoyutongsad</div>
</body>

钟表效果

   <style>
        @keyframes secondrun {
            0% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(540deg);
            }
        }

        @keyframes minuterun {
            0% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(540deg);
            }
        }

        div.clock {
            position: relative;
            width: 512px;
            height: 512px;
            background-image: url(./img/clock.png);
            background-size: cover;
            background-repeat: no-repeat;
        }

        div.second {
            position: absolute;
            left: 247px;
            top: 180px;
            width: 16px;
            height: 278px;
            background-image: url(./img/second.png);
            background-size: cover;
            background-repeat: no-repeat;
            transform-origin: center 76px;
            transform: rotate(180deg);
            z-index: 3;
            animation: secondrun 60s steps(60, end) infinite;
        }

        div.minute {
            position: absolute;
            transform-origin: center 16px;
            left: 238px;
            top: 240px;
            width: 32px;
            height: 218px;
            background-image: url(./img/minute.png);
            background-size: cover;
            background-repeat: no-repeat;
            transform: rotate(180deg);
            z-index: 2;
            animation: minuterun 3600s steps(60, end);
        }

        div.hour {
            position: absolute;
            transform-origin: center 16px;
            left: 238px;
            top: 240px;
            width: 32px;
            height: 148px;
            background-image: url(./img/hour.png);
            background-size: cover;
            background-repeat: no-repeat;
            z-index: 1;
        }
    </style>
</head>

<body>
  
    <div class='clock'>
        <div class="second"></div>
        <div class="minute"></div>
        <div class="hour"></div>
    </div>

</body>

跑马效果`

    <style>
        .box{
            width:200px;
            height:100px;
            overflow: hidden;
        }
        .pic{
            width:2400px;
            height:100px;
            background-image: url('./img/horse.png');
            animation:run 1s steps(12,end) infinite;
        }
        @keyframes run{
           from{
               transform: translate(0)
           }
           to{
               transform:translate(-2400px)
           }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"></div>
    </div>
</body>