css3动画-CSDN博客

本文链接：https://blog.csdn.net/2201_75616324/article/details/132787638

css3动画

1.动画的基本使用

1.使用@keyframes 动画名称定义动画

2.在需要动画的盒子上animation来使用动画

2.动画的常用属性

速度曲线细节

使用steps（）实现动态滚动条

使用animation-play-state：paused 实现动画暂停

综合动画实现

动画简写属性

css3动画

1.动画的基本使用

制作动画分为两步：

1.使用@keyframes 动画名称定义动画

 @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多样式任意次
建议用百分比来规定变化发生的时间

2.在需要动画的盒子上animation来使用动画

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            animation：move 2s;
        }

2.动画的常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必要）
animation-duration	规定动画完成一个周期所花费的秒或毫秒（必要）
animation-timing-function	规定动画的速度曲线，默认是‘ease’——以低速开始，加快，在结束前变慢
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画的播放次数
animation-direction	规定动画是否在下一周期逆向播放，默认是‘normal’，逆向播放是alternate
animation-play-state	规定动画是否正在运行或暂停，默认是‘running’，还有‘pause’
animation-fill-mode	规定动画结束后状态，保持结束状态‘forwards’f回到起始backwards

速度曲线细节

值	描述
linear	匀速
ease	默认，低速开始，加快，结束前变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	动画以低速开始和结束
steps（）	指定了时间函数中的间隔数量

使用steps（）实现动态滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   div{ 
        margin-top: 11px;    
        background:linear-gradient(orange 0 0) 0/0% no-repeat rgb(227, 231, 164);
          border-radius: 6px;
           font-size: 13px;
           width: 300px;
           height: 30px;
      
           /* steps就是分几步来完成我们的动画 有了steps就不用再写ease或者linear了 */
           animation: move 4s steps(10) forwards;
       }
       @keyframes move{
         
           100% {
        background-size:100%

           }
        }

</style>
<body>
    <span style="padding-left: 97px;">努力加载中...</span>
    <div class="box1">
        
    </div>

  

</body>
</html>

使用animation-play-state：paused 实现动画暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画常用属性</title>
    <style>
        @keyframes move {
           0% {
                transform: translate(0, 0);
           }
           100% {
               transform: translate(1000px, 0);
           }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: rgb(173, 126, 234);
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 5s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的   count 次数  infinite无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放  默认normal  想反方向就写alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后状态默认backwards  回到起始状态 我们可以让他停留在结束状态forwards */
            animation-fill-mode: forwards;
        }
        div:hover {
            /* 鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

综合动画实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes myFirst{
       0%{
        left:-10px;
        top:0;
       }
       25%{
        height: 10px;
        width:20px;
       
       }
       50%{
        height: 31px;
        width:15px;
        left: 134px;
        top:0;
       }
       75%{
        height: 10px;
        width:20px;
        
        top:0;
       }
       100%{
        height: 31px;
        width:15px;
        left:-10px;
        top:0;
       }
    }
    @keyframes mySecond{
       0%{
        left:-10px;
        bottom:0;
       }
       25%{
        height: 10px;
        width:20px;
       
       }
       50%{
        height: 31px;
        width:15px;
        left: 134px;
        bottom:0;
       }
       75%{
        height: 10px;
        width:20px;
        
        bottom:0;
       }
       100%{
        height: 31px;
        width:15px;
        left:-10px;
        bottom:0;
       }
    }

    .out{
        position: relative;
    }
    .top{
        background-color: green;
        height: 31px;
        width: 15px;
        position: absolute;
        animation: myFirst 2s infinite;
    }
    .bottom{
        background-color: green;
        height: 31px;
        width: 15px;
        position: absolute;
        animation: mySecond 2s infinite;
        position: absolute;
    }
    .contain{
        color: green;
    padding: 20px;
    height: 22px;
    width: 125px;
    font-size: 17px;
    }
</style>
<body>
    <div class="out">
        <div class="top"></div>
        <div class="contain">LOADING...</div>
        <div class="bottom"></div>
    </div>
</body>
</html>