动画的基本使用

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量1.4k 收藏 3
点赞数 2
文章标签： 动画 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyh619/article/details/122728462
版权

—— animation调用

目录

定义及语法

动画的调用

重点注意

常用属性

调用速写

典型例子

波点效果

放映图标效果

打字机及循环移动效果

  • 定义及语法

使用：用@keyframes定义动画，属于CSS3范畴；

格式：

 @keyframes 动画名称  {
         from / 0% {
                 起始态；
          }
          n% {
              中间态（可多个）；
          }
          to / 100% {
                 末尾态；
          }
     }

  • 动画的调用

调用：用animation属性调用，属于CSS语法；

格式：

在对应的div内部填写：

div{

animation-name:动画名称；

animation-duration：持续时间（s）；

}

  • 重点注意

  1. 定义时，百分比要为整数；
  2. 对应百分比就是  总时间的划分  。
  3. 运用多组动画时，由于层叠性，在调用下要用逗号隔开。

  • 常用属性

  1. @keyframes —— 规定动画；
  2. animation-name —— 动画名称；
  3. animation-timing-function —— 速度曲线 — — 默认：ease、匀速：linear、间隔步长：steps（n）,可制作打字机、动图效果;
  4. animation-duration —— 动画一个周期花费时间；
  5. animation-delay —— 动画何时开始 — — 默认：0s；
  6. animation-iteration-count —— 动画播放次数 — — 默认：1次、无限次：infinite；
  7. animation-direction —— 动画下一周期播放方向 — — 默认：normal、逆播放：alternate；
  8. animation-play-state —— 规定动画运行或停止 — — 默认：running、暂停：paused，通常与hover共用；
  9. animation-fill-mode —— 动画结束后状态 — — 默认：backwards、停此处：forwards。

  • 调用速写

（重点）animation : name  duration  timing-function （linear匀速） delay（延迟几秒） iteration-count（循环次数） direction（结束时方向）fill-mode（结束后位置）;

  • 典型例子

波点效果

<!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>月光波点</title>
</head>
<style>
    .container{
        width: 1000px;
        height: 600px;
        background: url(图片地址) no-repeat center/100% 100%;
        position: relative;
    }
    
    .main{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 265px;
        left: 465px;
    }

    .wave{
        width: 43px;
        height: 45px;
        box-shadow: 0 0 12px rgb(146, 155, 168);
        position: absolute;
        right: 50%;
        bottom: 50%;
        transform: translate(50%,50%);
        border-radius: 50%;
        animation: wave 1s infinite;
    }

    .main .a-2{
        animation-delay: 0.3s;
    }

    @keyframes wave {
        0% {}
        70% {
            width: 80px;
            height: 80px;
            opacity: 1;
        }
        100% {
            width: 120px;
            height: 120px;
            opacity: 0;
        }
    }

</style>
<body>
    <div class="container">
        <div class="main">
            <div class="wave a-1"></div>
            <div class="wave a-2"></div>
        </div>
    </div>
    
</body>
</html>

放映图标效果

<!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>知否放映图标</title>
</head>
<style>
    .container-box{
        height: 300px;
        width: 300px;
        overflow: hidden;
    }
    .box{
        height: 72px;
        width: 150px;
        border:3px solid  rgb(14, 201, 226);
        margin: 100px auto;
        border-radius: 20px;
        position: relative;
        animation: opacity 1s linear  infinite alternate forwards;
    }
    .triangle{
        height: 0;
        width: 0;
        border: solid;
        border-color: rgba(0, 0, 255, 0) rgba(0, 0, 255, 0) white rgba(0, 0, 255, 0);
        border-width: 53px 43px;
        position: absolute;
        right: 50%;
        bottom: -36px;
        transform: translate(50%,0);
        animation: move 1s linear  infinite alternate forwards;
}

    .triangle::after{
        content: "";
        height: 0;
        width: 0;
        border:solid;
        border-color: rgba(0, 0, 255, 0) rgba(0, 0, 255, 0) rgba(23, 201, 224, 0.534) rgba(0, 0, 255, 0);
        border-width: 39px 31px;
        position: absolute;
        right:50%;
        bottom:-45px;
        transform: translate(50%,0);
    }
    @keyframes move {
        0%{

        }
        100%{
            bottom: -18px;
        }
    }

    @keyframes opacity {
        0%{
            background-color: rgba(0, 0, 255, 0);
        }
        100%{
            background-color: rgba(58, 194, 228, 0.377);
        }
    }
</style>
<body>
    <div class="container-box">
        <div class="box">
        <div class="triangle"></div>
        </div>
    </div>
</body>
</html>

打字机及循环移动效果

<!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>打字机及循环移动效果</title>
</head>
<style>
    .container{
        height: 30px;
        border-radius: 10px;
        border: 1px ridge cadetblue; 
        font-size:20px;
        font-family: 翩翩体-简;
        /* 共15个字，分15步 */
        animation: main 3s steps(15) forwards,move 20s linear 1s infinite alternate;
        overflow: hidden;
    }

    @keyframes main {
        0%{
            width: 0px;
        }
        100%{
            /* 每个字20px，则共需300px。 */
            width: 300px;
        }
    }

    @keyframes move {
        from {
            transform: translate(0,0) rotate(0deg);
        }
        25%{
            transform: translate(1000px,0) rotate(90deg);
        }
        50%{
            transform: translate(1000px, 600px) rotate(180deg);
        }
        75%{
            transform: translate(0,600px) rotate(270deg);
        }
        to{
            transform: translate(0,0) rotate(360deg);
        }
    }

    .container:hover{
        /* 触碰停止效果 */
        animation-play-state: paused;
    }
</style>
<body>
    <div class="container">
        我是图图小淘气，面对世界很好奇
    </div>
</body>
</html>

— — — — 完结

march on_6
关注
Android-补间动画基本使用（位移、缩放、旋转、透明）
Android、HTML、CSS、JS、JAVA、Kotlin、PHP等技术
08-29 3577
补间动画 原形态变成新形态时为了过渡变形过程，生成的动画就叫补间动画 位移、旋转、缩放、透明 位移： 参数10指的是X的起点坐标，但不是指屏幕x坐标为10的位置，而是imageview的 真实X + 10 参数150指的是X的终点坐标，它的值是imageview的 真实X + 150 //创建为位移动画对象，设置动画的初始位置和结束位置 TranslateAnima
Android补间动画基本使用（位移、缩放、旋转、透明）
08-27
Android 补间动画基本使用（位移、缩放、旋转、透明） Android 补间动画是指原形态变成新形态时为了过渡变形过程，生成的动画。补间动画可以使得界面更加生动、美观，提高用户体验。本文将详细介绍 Android 补间...
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 7947
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡
热门推荐
weixin_43183219的博客
01-09 1万+
animation的八个基础属性、关键帧详细介绍，平移、旋转、缩放、倾斜、过渡的解释及应用
css动画——animation各个属性详解
m0_72348850的博客
03-28 2327
动画属性包括：①animation-name，②animation-duration，③animation-timing-function，④animation-delay，⑤animation-iteration-count，⑥animation-direction，⑦animation-fill-mode，⑧animation-play-state。7、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
CSS3动画-transition、animation、transform（translate/scale/rotate）
03-19 3554
目录 一、transition（过渡） 1、transition-duration 2、transition-property 3、transition-timing-function 4、transition-delay 二、animation 1、@keyframes 2、animation-timing-function 3、animation-delay 4、animation-iteration-count：检索或设置对象动画的循环次数 5、animation-pla...
CSS3中设置动画播放时间
lorry的博客
06-15 6790
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒 语法规则 animation-duration: [,]* 取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。 案...
animation的属性值
maybemetoo的博客
02-23 976
菜鸟教程
css 动画 day05
qq_46472106的博客
08-09 151
Css动画 1.定义动画轨迹 @keyframes 轨迹名称{ from{ //开始位置的样式 } to{ //结束位置的样式 } } @keyframes 轨迹名称{ 0%{} 50%{} 60%{} 100%{} } 2.元素执行轨迹 div{ animation-name:轨迹名称 } ①动画的速度曲线（ animation-timing-function ） ü ease 默认值 ü ease-in 先慢后快 ü ease-out 先快后慢 ü ease-in-out 先慢后快再慢 ü l
CSS3：动画animation
qq_54517101的博客
08-14 296
先在style定义动画的名字及序列 再在css中调用，一般来说最少需要两个语句：一个是对应的动画名字，一个是持续时间： 常见属性： 简写： 案例，波纹效果： steps（）指的是几步完成动画 ，写了就不用写linear或者ease了...
Android动画系列之属性动画的基本使用教程
01-20
属性动画相较帧动画和补间动画更强大，帧动画和补间动画只能应用于 View 及其子类，而属性动画可以修改任何对象的属性值，属性值可在指定的一段时间内自动改变，根据对象属性值的变化进而实现更复杂的动画。...
WPF 基本动画、关键帧动画和路径动画示例
12-14
WPF动画的使用，包括DoubleAnimation、ColorAnimation、PointAnimation、ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、StringAnimationUsingKeyFrames、...
发现微信小程序 animation.scale(1).opacity(1).step(),animation.opacity(1).step()无效
zyw1225565180的专栏
12-12 663
animation.opacity(1) 无效果
CSS3 动画
Continue的博客
03-17 271
CSS3 动画 动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 动画的基本使用 制作动画分为两步： 先定义动画 再使用（调用）动画 1.用 keyframes 定义动画（类似定义类选择器） 语法： @keyframes 动画名称{ 0%{ //定义初始状态，如 width:100px; }
css animation 鼠标移入暂停会抖动
今晚吃火锅的博客
07-11 896
css animation-play-state
vue中通过.style.animationDuration属性，根据数据长度动态设定元素的纵向滚动时长的demo
苦瓜_小学生的博客
11-15 762
所以通过动态设置 .style.animationDuration，可以根据数据的长度来调整滚动速度，从而实现动态的滚动效果。.style.animationDuration 是一个 DOM 元素的属性，用于设置或获取元素应用的动画持续时间。通过 refs 访问 DOM 元素时，有时需要在 DOM 渲染完成后才能正确获取到相应的元素，所以需要将设置滚动速度的逻辑放到。2、类名为marquee的盒子为需要滚动内容的元素，给一个ref值之后通过获取ref设置元素的动画时长。就可以实现这一目的。
动画animation
weixin_52148489的博客
12-17 545
animation: 动画名称 时间 循环次数 时间曲线 动画最终样式; infinite:无限循环 时间曲线:ease(默认值 慢-快-慢) linear:匀速 动画最后的状态:forwards保留动画最后的样式 backwards默认值，回到动画最初的样式 animation: donghua 1s infinite linear; animation: donghua 1s linear forwards; 创建关键帧： key:钥匙，关键。 frames:帧 name:动画名字 form(也可以写成
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5842
再看代码： JS部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

march on_6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值