CSS基础：浅聊动画

于 2022-03-22 17:30:04 发布
阅读量328 收藏
点赞数
分类专栏： CSS 文章标签： CSS3 动画 animation keyframes step
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011863822/article/details/123666434
版权

动画是CSS中最令人兴奋的颠覆性特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果，相对于过渡，动画可以实现更多的变化，更多的控制，连续自动播放等效果。

需要两个步骤：

  • 先定义动画：也就是动画的内容以及给内容其一个名字

    @keyframes 动画名称{
    /*动画开始*/
    0%{
        行为
    }
    ………………
    /*动画结束*/
    100%{
        行为
    }
    
}
/*使用百分比来规定变化的时间，也可以使用 from to   等同于 0% 100%*/

  • 调用动画：就是元素调用动画内容

选择器{
    animation-name:动画名称;
    /*动画执行花费时间*/
    animation-duration:持续时间;
        
}

先看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,500px);
            }
        }
        div{

            width: 400px;
            height: 400px;
            border-radius: 200px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 1s;

        }
        
    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

当然步骤还可以增加多个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            25%{
                transform: translate(0px,500px);
            }
            50%{
                transform: translate(500px,500px);
            }
            75%{
             transform: translate(0px,500px);
            }
            100%{
            transform: translate(0px,0px);
            }
            
        }
        div{

            width: 400px;
            height: 400px;
            border-radius: 200px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 1s;

        }
        
    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

注意：

  • 里面的百分比是时间百分比。

动画属性

在看网页的时候，会发现有些网页的是某些效果是循环一直动的，当然有些不是视频或者flash而是通过动画的属性进行设置，现在看一下动画的一些属性

属性描述
@keyframes规定动画以及动画名称，这个很好理解，看例子就明白
animation-name元素调用动画名称的属性，（必有）
animation-duration完成动画所需要的时间，单位是秒或者毫秒，默认是0.（必有）
animation-timing-function规定动画运动的速度曲线，默认是ease。前面2D转换中也有类似，可以参考理解。
animation-delay规定动画延迟多久才开始执行，默认是0.
animation-iteration-count动画动画播放的次数默认是1，还可以为infinite（无限循环）
animation-direction规定动画在下一个周期是否逆向播放，默认是normal，当然也可以逆向：alternate
animation-play-state规定动画是否运行或者暂停，默认是runing，还可以设置pause
animation-fill-mode规定动画结束的状态，保持运动后位置为forwards回到起始backwards。

animation-name和animation-duration在演示的时候以及呈现了，现在演示一些剩下的属性。

animation-timing-function

这个属性是运动的速度，比如匀速和加速等。默认是ease。

看图：

在这里插入图片描述

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-timing-function: ease-in-out;

        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

补充 运动轨迹step()：

这个运行轨迹为什么要说，

@keyframes 动画名称{
    /*动画开始*/
    0%{
        行为
    }
    ………………
    /*动画结束*/
    100%{
        行为
    }
    
}
/*如果走十步，完成100% 可以写10% 20% 等，但是如下写更方便*/
animation-timing-function:step(10);

animation-delay

这个就是一个多久后再执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-delay: 2s;

        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

可以看出是延迟2秒后执行。

animation-fill-mode

可以看出所有的运动完毕后，都闪回到起点了，所有动画提供了这个属性。

在这里插入图片描述

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-fill-mode: forwards;

        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

animation-iteration-count

在这里插入图片描述

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-iteration-count:infinite;

        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

虽然可以可以无限次的运动，但是有没有发现一件事，就是动画结束后，又闪回起始点，如果需要来回移动的话就需要了解下面这个属性。

animation-direction

在这里插入图片描述

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-iteration-count: 2;
            /*定义的是下一次运行后才会返回所以就设置运行次数为2*/
            animation-direction:alternate;

        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

animation-play-state

在这里插入图片描述

这个属性一般的时候伪元素一起用，比如当运动的元素用鼠标放上去的时候就停止，来先看演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        @keyframes test_move {
            0%{
                transform: translate(0px,0px);
            }
            100%{
                transform: translate(500px,0px);
            }
        }
        div{

            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #4a90e2;
            animation-name: test_move;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            /*定义的是下一次运行后才会返回所以就设置运行次数为2*/
            animation-direction:alternate;
        }
        div:hover{
            animation-play-state: paused;
        }

    </style>
</head>
<body>
<div></div>

</body>
</html>

在这里插入图片描述

复合写法

上面的属性自然可以复合写法。

格式一般如下：

animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向 动画的状态

来一个例子，假设就是一个游戏而自己刷的怪的地点，加一个标志。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>

        .map{

            margin: 10px auto;
            width: 1600px;
            height: 800px;
            background : url("jpg/ditu.jpg") no-repeat center center;

        }
        .target{
            position: relative;
            top: 500px;
            left: 500px;
        }
        /*9a6e3a*/
        .spot{
            width: 10px;
            height:10px;
            background-color: #df5000;
            border-radius: 10px;
        }
        div [class^="shaw"]{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 10px;
            height:10px;
            border-radius: 10px;
            box-shadow: 0px 0px 11px #df5000;
            animation: 1s biao infinite;

        }
        @keyframes biao {
            0%{
                transform: scale(1,1);
            }
            100%{
                transform: scale(3,3);
            }

        }

        div .shaw2{
            animation-delay: 0.5s;
        }
        div .shaw3{
          animation-delay: 1s;
        }



    </style>
</head>
<body>
<div class="map">
    <div class="target">
        <div class="spot"></div>
        <div class="shaw1"></div>
        <div class="shaw2"></div>
        <div class="shaw3"></div>
    </div>


</div>

</body>
</html>

在这里插入图片描述

小猪弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值