CSS动画animation关键帧的使用

已于 2022-03-30 14:39:54 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： css 文章标签： css css3
于 2021-05-19 09:01:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51499232/article/details/117014866
版权

常用动画属性：

animation-name: hd;	设置动画名称（必写）
  
animation-duration: 2s;	设置动画时间（必写）

animation-fill-mode: forwards;     填充模式：停止到最后一帧，保留0帧时的状态
animation-fill-mode: both;     填充模式：停止到最后一帧，不保留0帧时的状态

animation-delay: 2s;     动画延迟2s后执行

animation-iteration-count: infinite;    设置无限循环动画，也可写数字1234等等，表示动画执行1234次

animation-direction: reverse;    动画执行方向，从100%到0%执行。
animation-direction: alternate;	   动画执行方向，从0%到100%执行再从100%到0%执行。

animation-timing-function: ease;   动画执行速度，先快后慢
animation-timing-function: ease-in;   动画执行速度，先慢后快
animation-timing-function: ease-out;   动画执行速度，匀速
animation-timing-function: ease-in-out; 	动画执行速度，两边慢，中间快
animation-timing-function: linear; 	动画执行速度，渐变
animation-timing-function: steps(4,start);	动画执行速度，4步走完。像俄罗斯方块下降速度。从第二步开始
animation-timing-function: steps(4,end);	动画执行速度，4步走完。像俄罗斯方块下降速度。从第一步开始

div:hover{
	animation-play-state:paused;   鼠标放上去动画暂停
	animation-play-state:running;   鼠标放上去动画开始
}

//组合模式（名称，时间，渐变速度，延迟，循环次数，方向，填充模式）
animation: name duration timing-function delay iteration-count direction fill-mode;

举例荧光字

 <div class="word">abc</div>

.word {
        animation: animate linear 2000ms infinite;
    }

 @keyframes animate {
        0% {
            opacity: 0.3;
        }
        100% {
            opacity: 1;
            text-shadow: 0 0 80px Red, 0 0 30px orange, 0 0 6px DarkRed;
        }
    }

动画延迟属性

 .word {
        animation-delay: 900ms;
    }

干货1:简单的动画

1、先声明关键帧名称：hd。
2、在main元素上添加animation-name: hd;
3、设置动画时间animation-duration: 2s;
三步即可完成简单的渐变动画

注：如果0%和100%不写，则默认是初始状态。

<style>
  body {
    width: 100vw;
    height: 100vh;
    background-color: rgb(21, 6, 77);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  main {
    width: 100px;
    height: 100px;
    background-color: #fff;
    /* 设置动画名称（必写） */
    animation-name: hd;
    /* 设置动画时间（必写） */
    animation-duration: 2s;
  }

  /* 定义关键帧hd */
  @keyframes hd {
    /* 起始也可以写from */
    0% {
      background-color: #fff;
    }
    /* 结束也可以写to */
    100% {
      background-color: red;
    }
       /* 如果有共同属性也可以这样写 */
       0%,100%{
		border:1px solid yellow;
	}
  }
</style>
<body>
  <main></main>
</body>

干货2:多个动画关键帧一起绑定

<style>
  body {
    width: 100vw;
    height: 100vh;
    background-color: rgb(21, 6, 77);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  main {
    width: 400px;
    height: 400px;
    border: 1px solid #ddd;
  }

  div {
    width: 100px;
    height: 100px;
    background-color: yellow;
      /* 多个关键帧以逗号隔开 */
    animation-name: hd,bd;
      /* 可以分开定义时间，如果不定义，则执行第一个动画时间 */
    animation-duration: 2s,1s;
  }

  /* 定义关键帧hd */
  @keyframes hd {
    25% {
      transform: translateX(300px);
    }

    50% {
      transform: translate(300px, 300px);
    }

    75% {
      transform: translateY(300px);
    }
  }

  @keyframes bd {
    25% {
     background-color: red;
    }

    50% {
      background-color: yellow;
    }

    75% {
      background-color: blue;
    }
  }
</style>

案例1

<style>
  main {
    width: 100vw;
    height: 100vh;
    background-color: rgb(21, 6, 77);
    transform: scale(0);
    animation-name: hd;
    animation-duration: 2s;
    /* 填充模式：停止到最后一帧 */
    animation-fill-mode: forwards;
     /* 设置无限循环动画 */
    animation-iteration-count: infinite;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  main::after {
    content: "www.baidu.com";
    font-size: 2em;
    color: #fff;
    opacity: 0;
    animation-name: opacity;
    animation-duration: 2s;
    /* 动画延迟2s后执行 */
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }

  /* 定义关键帧hd */
  @keyframes hd {
    25% {
      transform: scale(0.5);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(0.5);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes opacity {
    to {
      opacity: 0.8;
    }
  }
</style>

案例2：心动动画

在这里插入图片描述

<style>
  body {
    width: 100vw;
    height: 100vh;
    background-color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .heart {
    width: 200px;
    height: 200px;
    background-color: red;
    transform: rotate(45deg);
    animation: hd;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  @keyframes hd {
    50% {
      transform: rotate(45deg) scale(1.5);
    }
  }

  .heart::before {
    content: "";
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background-color: red;
    transform: translateX(-100px);
  }

  .heart::after {
    content: "";
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background-color: red;
    transform: translateY(-100px);
  }
</style>

<body>
  <div class="heart"></div>
</body>
蛋蛋的老公
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css动画animation详细解读
宋坚强大大~~
10-22 4580
以一个小球为例 向右匀速运动200px 然后再移动回来，然后再移动到200px处 停在那里 效果如下 div{ width:40px; height:40px; border-radius:50%; background:#0ff; animation:move 2s linear 3 alternate both; } @keyframes ...
动画讲解—— CSS
mantou_riji的博客
04-17 2596
文章目录动画概念动画的设置——关键帧关键帧animation-nameanimation-durationanimation-delayanimation-timing-function:animation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode属性简写：练习关键帧的复杂应用小球的自由下落小球的花样运动 动画概念 动画和过渡类似,都是可以实现一些动态的效果, 不同的是过渡需要在某个属性发生变化时才会触
CSS 之 帧动画（Keyframe Animation）
最新发布
weixin_45092437的博客
05-13 1615
帧动画允许你通过指定 CSS 属性在不同时间点上的行为来创建动画效果，这些时间点被称为关键帧，所以又被称为关键帧动画。帧动画需要通过@keyframes来创建。@keyframes`仅仅是定义了在所在作用域内全局都可以使用的关键帧动画，定义好了动画的过程，但是其并不能自动应用。还需要通过CSS的animation属性来显式的指定关键帧动画应用的元素，以及一系列相关的动画属性。
CSS3之animation属性
qq_44193048的博客
04-26 650
animation 属性是一个简写属性，用于设置动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction（转载w3c）； animation定义和用法 animation：[[ animation-na...
【CSS】动画animation所含各项参数内容
Evenurs的url
06-09 6369
主要描述CSS3中，对于animation动画效果设置语句中，各个参数的详细说明，以及范例代码。
CSS图片流动轮播效果动画鼠标hover后暂停动画
千里之行，始于足下
11-09 490
CSS图片流动轮播效果动画鼠标hover后暂停动画
详解CSS动画属性关键帧keyframes全解析
09-22
- **关键帧**：在CSS动画中，关键帧定义了动画在不同时间点上的样式状态。这些时间点通常用百分比表示，例如0%、50%、100%，代表动画开始、中间和结束的状态。 - **@keyframes 规则**：用于声明关键帧的CSS规则，...
CSS3 animation实现逐帧动画效果
01-21
使用animation实现逐帧动画 熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键...
CSS3 Animation文字动画特效
06-24
CSS3 Animation允许开发者通过关键帧（keyframes）定义元素在特定时间点上的样式，从而创建平滑的过渡效果。通过`@keyframes`规则，我们可以控制元素在动画过程中的每一帧样式。例如： ```css @keyframes fadeIn { ...
前端2-6-11：animate-timing-function属性、cubic-bezier() 函数、贝塞尔曲线的快慢
Yummy的博客
06-11 1230
【问题】下面使用Animate-timing-function定义的贝塞尔曲线，哪一个是先快后慢的（） 正确答案: A 你的答案: B(错误) animation-timing-function : cubic-bezier(.22,1.23,.97,.89) animation-timing-function : cubic-bezier(1.23,..22,97,.89) animation-timing-function : cubic-bezier(1.23,.97,.89,.2...
动画animation
qq_39366219的博客
07-20 268
动画animation @keyframes规则 如需在css3中创建动画，需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项 css样式，就能创建由当前样式逐渐改为新样式的动画效果。 写规则时至少包含两个属性：规定动画的名称；规定动画的时长 写好规则，再使用animation属性来应用到某个元素 animation
css动画效果，过渡效果基础详解
ma_qianbo的博客
08-10 736
1.css动画效果 1.1定义动画 1.2动画的属性 动画名称 animation-name 完成一次动画的时间 animation-duration 动画延迟 animation-delay 动画运动方向 animation-direction reverse反向 alternate交替 alternate-reverse先反向，在交替 ...
CSS过渡与动画
三月nebula
11-11 237
什么是动画 使元素从一种样式逐渐变化为另外一种样式的过程 css中实现动画，会存在兼容性问题，与动画相关的操作尽量加上，浏览器前缀 使用动画的步骤 声明动画 指定动画名称以及创建动画中的每个状态(关键帧) 为元素调用动画 指定调用的动画名称，市场，，播放次数… 声明动画 指定动画名称及各个关键帧 关键帧：当前元素状态的时间点及样式 语法 在样式表中声明 @keyframes 动画名称{ 0...
css 动画 day05
qq_46472106的博客
08-09 118
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动画属性解析:【transform -变形】
w15228212327_cc的博客
06-19 687
前面几篇文章我们已经一起学习了animation和transition 的使用，今天我们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是很多初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，所以我把它们放到一块来写了，小伙伴们可不要混淆啊。 ...
animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡
热门推荐
weixin_43183219的博客
01-09 1万+
animation的八个基础属性、关键帧详细介绍，平移、旋转、缩放、倾斜、过渡的解释及应用
animation动画过渡
weixin_45243726的博客
09-10 468
前言 一个简单的小案例，网页旋转六边形的图片墙 一、animation animation 参数一 参数二参数三参数四参数五 参数六 参数一：需要绑定的动画名称 参数二：完成动画所需要的时间 参数三：动画的速度 linear： 匀速运动 ；ease ：默认值，先慢再快；ease—in：以高速开始，逐渐减慢； ease-out：低速开始，逐渐加快。 参数四：动画开始前需要等待的时间。 参数五：动画循环的次数。 infinite：无限...
前端 —— JavaScript 基础篇 缓动动画（先快后慢的动画效果）demo
宁静致远
06-26 2750
今天来个 缓动动画的小例子 ，是为了方便自己日后的复制粘贴，若是能帮助到大家，拿走不谢。话不多说，直接上代码。 <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: yellow; text-align: center; position: relative; top: 0px; .
动画的常用的枚举值,动画先慢再快再慢,动画越来越快,动画越来越慢,动画匀速,动画期间允许交互
xuebing22022的博客
12-04 1033
动画的常用的枚举值,动画先慢再快再慢,动画越来越快,动画越来越慢,动画匀速,动画期间允许交互
CSS3 动画关键帧
04-18
CSS3动画关键帧是指在CSS3中定义动画效果的关键帧。通过在关键帧中定义元素的样式属性，可以实现元素在不同时间点上的不同样式，从而创建出流畅的动画效果。 在CSS3中，我们可以使用@keyframes规则来定义动画关键帧。@keyframes规则包含了一系列关键帧，每个关键帧定义了元素在动画过程中的样式。 下面是一个CSS3动画关键帧的示例： ```css @keyframes myAnimation { 0% { opacity: 0; transform: translateX(-100px); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(100px); } } ``` 在上面的示例中，我们定义了一个名为myAnimation的动画关键帧。该动画从0%到100%的过程中，元素的透明度和水平位移会发生变化。在0%时，元素完全透明且向左移动100像素；在50%时，元素完全显示且位于原始位置；在100%时，元素再次完全透明且向右移动100像素。 要将动画应用到元素上，可以使用animation属性，并指定动画名称、持续时间、延迟时间等参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蛋蛋的老公

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

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

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

打赏作者

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

抵扣说明：

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

余额充值