CSS第十天学习总结—— CSS3 动画

本文详细介绍了CSS3的动画特性,包括动画的步骤、语法、关键帧定义、持续时间、速度曲线、延迟时间、循环次数和方向等。通过多个案例,如大数据热点图和奔跑的熊大,展示了如何创建和控制复杂动画效果,并提及了动画的暂停和播放以及动画结束事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

动画 animation

  • 动画(animation)是CSS3中具有颠覆性的特征之一,

  • 可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

  • 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

  • 初学者容易对 动画过渡 傻傻分不清楚

  • 过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

  • 动画 可以设置变化的次数 甚至是无数次

在这里插入图片描述

步骤

制作动画分为两步:

  1. 在css中定义动画函数 @keyframes:关键帧
  2. 给目标元素调用动画函数

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        
        /* 1. 声明动画函数 */
        /* keyframes关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化*/
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

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

</html>

动画序列:

  • 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
  • @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。

总结

keyframes:关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化。

语法

动画常用属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性,除了animation-play-state属性
animation-name规定@keyframes动画的名称。(必须)
animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须)
animation-timing-function规定动画的速度曲线,默认是“ease”
animation-delay规定动画何时开始,默认是0
animation-iteration-count规定动画被播放的次数,默认是1,还有infinite
animation-direction规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆播放
animation-play-state规定动画是否正在运行或暂停。默认是“running”,还有“paused”
animation-fill-mode规定动画结束后状态,保持forwards,回到起始backwards

动画名称

animation-name:xxx; 设置要使用的动画名。

持续时间

animation-duration: 0; 设置动画播放的持续时间, 默认是0s

速度曲线

animation-timing-function:linear; 规定动画的速度曲线,默认是“ease”。

描述
ease默认值。动画以低速开始,然后加快,在结束前变慢 。 慢-快-慢
linear匀速。动画从头到尾的速度是相同的。
ease-in动画以低速开始。慢-快。
ease-out动画以低速结束 。 快-慢。
ease-in-out动画以低速开始和结束。 慢-快-慢。
step()指定了时间行数中的间隔数量(步长)

速度曲线步长step()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards infinite ;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

延迟时间

animation-delay: 0s; 设置动画何时开始,默认是0s。

循环次数

animation-iteration-count: 2; 设置动画播放的循环次数,默认是1。

值可以是数字也可以是infiniteinfinite:无限循环

循环方向

animation-direction 设置动画是都在下一周期逆向播放。

如在动画中定义了 0%:红色 100%:黑色 那么 当属性值为

  1. normal 默认值 红 -> 黑
  2. reverse 反向运行 黑 -> 红
  3. alternate 正-反-正… 红 -> 黑 -> 红…
  4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
  5. 以上与循环次数有关 (如果是交替,那么循环次数最少为2,才能来回交替一次)

动画等待或者结束的状态

animation-fill-mode 设置动画在等待或者结束的时候的状态 。

动画结束之后默认是回到初始状态:backwards

  • forwards:动画结束后,元素样式停留在 100% 的样式
  • backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
  • both: 同时设置了 forwards和backwards两个属性值

动画播放状态:暂停和播放

animation-play-state 控制 播放 还是 暂停

running 播放 paused 暂停

复合写法(简写)

语法:

animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
  • 前边两个属性必须要写,后边的可以省略
  • 简写属性里面不包含 animation-play-state
  • 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
  • 想要动画走回来 ,而不是直接跳回来:animation-direction:alternate;
  • 盒子动画结束后,停在结束位置: animation-fill-mode: forwards ;

多个动画写法

用逗号分隔

animation: name duration timing-function delay iteration-count direction fill-mode,
name duration timing-function delay iteration-count direction fill-mode;

动画结束事件animationend

元素在动画结束之后,会自动触发的事件 animationend

var div = document.querySelector("div");
div.addEventListener("animationend", function () {
    console.log("div的动画结束之后,触发");
})

案例1:大数据热点图

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
        	/* 地图,水平居中,热点效果需要定位,所以子绝父相 */
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            /* 北京 处理位置 */
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            /* 台北  */
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            /* 小圆点 */
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;  /*阴影效果*/
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;  /* 动画,匀速,无线循环  */
        }
        
        .city div.pulse2 {
            /* 第二层波纹延迟0.4s */
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            /* 第三层波纹延迟0.8s */
            animation-delay: 0.8s;
        }
        
         /* 定义动画,0%默认,70%大小变大,透明度不变。100%继续变大,透明度变为0。
       	    效果就是,波纹从小到70%越来越大,让再大的话就开始变虚。
       	 */
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
         <!-- 北京 -->
        <div class="city">
            <div class="dotted"></div> <!-- 小圆点 -->
            <div class="pulse1"></div> <!-- 波纹1 -->
            <div class="pulse2"></div> <!-- 波纹2 -->
            <div class="pulse3"></div> <!-- 波纹3 -->
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

案例2:奔跑的熊大案例

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画, 用逗号分隔 */
            animation: bear .4s steps(8) infinite,move 3s forwards  ;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%; 
                transform: translateX(-50%);
            }
        }
         /* margin-left: -100px; */
    </style>
</head>

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

</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值