CSS 的关键帧和动画

CSS 的关键帧和动画是如何工作

如果要给元素添加动画,你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观,@keyframes 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。

  1. animation-name
    用来设置动画的名称,也就是我们稍后要在 @keyframes 里用到的名称。

  2. animation-duration
    设置动画所花费的时间。

@keyframes 可以通过设置特定时间点的行为来创建动画。 为此,我们只需要给持续时间内的特定帧(从 0% 到 100%)加上 CSS 规则。 如果用一部电影来做类比,那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头;100% 关键帧就像是电影里的片尾,就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内,CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子,相当于电影里的演职员表或者鸣谢镜头。 然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。 下面举例说明 @keyframes 和动画属性的用法:

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 为 anim 的元素,我们在代码中将它的 animation-name 设置为 colorful,同时设置 animation-duration 为 3 秒。 然后我们把 @keyframes 规则添加到名为 colorful 的动画属性上。 在动画开始时(0%)的背景颜色为蓝色,在动画结束时(100%)的背景颜色为黄色。 注意我们不只可以设置开始和结束,而是从 0% 到 100% 间的任意位置都可以设置。

  1. @keyframes 规则的用法。
    还有一个常用的动画属性是 animation-iteration-count,这个属性允许你控制动画循环的次数。 下面是一个例子:
animation-iteration-count: 3;

在这里动画会在运行 3 次后停止,如果想让动画一直运行,可以把值设置成 infinite。

<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  @keyframes bounce{
    0% {
      top: 0px;
    }
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
    100% {
      top: 0px;
    }
  }
</style>
<div id="ball"></div>

注释:把 animation-iteration-count 属性改成 infinite,使右边的球一直跳跃。
同样的,我们可以利用无限动画计数制作心跳:
心跳动画的每一秒包含两个部分。 heart 元素(包括 :before 和 :after)使用 transform 属性改变其大小,背景 div 使用 background 属性改变其颜色。

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s; 
    animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s; 
    animation-iteration-count:infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

注释:给 back class 和 the heart class 添加 animation-iteration-count 属性,将属性值设置为 infinite,使心保持跳动。 heart:before 和 heart:after 所选择的元素则不需要添加动画属性。
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: CSS关键帧动画可以通过使用@keyframes规则来实现。@keyframes规则定义了动画关键帧,即动画在不同时间点的状态。 关键帧动画有以下属性: 1. animation-name:指定动画的名称。 2. animation-duration:指定动画的持续时间。 3. animation-timing-function:指定动画的时间函数,用于控制动画的速度变化。 4. animation-delay:指定动画的延迟时间。 5. animation-iteration-count:指定动画的循环次数。 6. animation-direction:指定动画的方向,可以是正向、反向或交替。 7. animation-fill-mode:指定动画在执行前和执行后的状态。 8. animation-play-state:指定动画的播放状态,可以是运行或暂停。 以上属性可以通过在元素的样式中使用animation属性来实现关键帧动画。例如: div { animation: myanimation 2s ease-in-out 1s infinite alternate; } 这个例子中,动画名称为myanimation,持续时间为2秒,时间函数为ease-in-out,延迟时间为1秒,循环次数为无限,方向为交替。 ### 回答2: CSS关键帧动画可以通过 @keyframes 规则来实现,其语法如下: ``` @keyframes animation-name { 0% { /* CSS 属性和值 */} 50% { /* CSS 属性和值 */} 100% { /* CSS 属性和值 */} } ``` 在该规则中,animation-name 定义动画的名称,可以在后面的 animation 属性中引用;0%、50%、100% 分别表示动画发生的时间点,可以分别设置 CSS 属性和对应的值,顺序随便;最后,可以在元素中使用 animation 属性将动画应用到指定元素上。 以下是常用的 @keyframes 属性: - animation-name:指定动画名称,需要与元素中的 animation 属性中的动画名称相同才能生效。 - animation-duration:指定动画持续时间,单位为秒或毫秒。 - animation-delay:指定动画延迟时间,单位为秒或毫秒。 - animation-timing-function:指定动画的时间函数,用于控制动画的速度。常见的时间函数有 linear、ease、ease-in、ease-out、ease-in-out 等。 - animation-iteration-count:指定动画的播放次数,可以为数字、infinite 或者关键字 alternate(动画循环次数为基数或偶数时反向播放)。 - animation-direction:指定动画的播放方向,可以为 normal、reverse、alternate 或者 alternate-reverse。 - animation-fill-mode:指定动画在播放前和播放后的状态,可以为 none、forwards、backwards 或者 both。 除了以上属性,@keyframes 还支持其他一些属性,如 animation-play-state 控制动画的播放状态,animation-iteration-delay 控制每次迭代之间的间隔等。总的来说,CSS关键帧动画提供了很多属性,可以灵活地控制元素的动画效果。 ### 回答3: CSS关键帧动画是通过指定不同的动画状态来实现的,也称为帧 by 帧动画或逐帧动画。通过在指定的关键帧(即动画状态)中定义属性值,使用者可以把元素从一个状态逐渐变为另一个状态,从而创造出动画效果。现在让我们来看看如何实现 CSS关键帧动画以及关键帧动画都有哪些属性: 关键帧动画的实现 要实现 CSS 中的关键帧动画,我们需要使用 @keyframes 规则。这通常包括定义一个动画的名称以及一系列用于指定动画状态的关键帧。例如,下面是一个简单的示例: ``` @keyframes my-animation { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } ``` 在上述示例中,我们定义了一个名为 my-animation 的动画,并指定了三个关键帧:0%、50% 和 100%。每个关键帧都包含 CSS 属性,该属性将元素从前一个状态逐渐转换到下一个状态。在这个例子中,我们将元素的透明度从 0 到 1 进行了渐变。 关键帧动画的属性 除了要创建关键帧,我们还可以使用各种不同的属性和值来指定其他关键帧动画的行为。以下是一些主要的属性: 1. animation-name 指定要使用的动画名称。 2. animation-duration 指定动画的持续时间,以秒或毫秒为单位。 3. animation-timing-function 指定动画执行的节奏或缓动类型。例如,linear、ease、ease-in、ease-out 或 ease-in-out。 4. animation-delay 指定动画的延迟时间,以秒或毫秒为单位,在该时间之后才开始执行动画。 5. animation-iteration-count 指定动画应该执行多少次。例如,使用无限循环可以设置为 infinite。 6. animation-direction 指定元素在动画结束后是否应该反转方向,并反向播放动画。例如,normal 或 alternate。 7. animation-fill-mode 指定动画是否应该在执行前或执行后将其应用于元素的样式。例如,none、forwards、backwards 或 both。 总之,关键帧动画是一种非常有用的技术,可用于为网页中的元素添加各种动画效果。理解它的工作原理以及可用的各种属性非常重要,这样你就可以通过使用 CSS 来制作出令人惊叹的动画效果的。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

の月光の

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值