【css】animation

richest_qi

已于 2022-08-06 13:14:15 修改

阅读量660

点赞数

分类专栏： css 文章标签： animation

于 2020-09-02 21:08:44 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/108365920

版权

css 专栏收录该内容

69 篇文章

订阅专栏

animation-name
@keyframes指定的关键帧名称
animation-duration
动画从开始到结束持续多长时间，即动画周期。
animation-timing-function
调速函数，它决定了在整段时间里动画是如何推进的。
默认是ease。
ease，"缓慢"的意思。
ease-in，低速进入动画；
ease-out，低速结束动画；
ease-in-out，低速开始动画，且低速结束动画
- ease
  低速进入，然后突然加速，最后减速至动画结束。
  时间逝去50%，动画已推进至80%
- ease-in
  低速进入，随后一直加速至动画结束。
  时间逝去50%，动画已推进至32%。
- ease-out
  动画突然开始，随后减速至结束。
  时间逝去50%，动画已推进至68%。
- ease-in-out
  动画低速开始，然后加速，最后减速至结束。
  时间逝去50%，动画已推进至50%。
- linear
  一直匀速
- step-start
  动画立即跳至最终状态，并维持该状态至结束
- step-end
  动画一直维持初始化状态，直到结束时直接跳到最终状态

animation-delay
正值，等待多久，才开始动画效果；
负值，动画立即开始，但从负值绝对值的那个时刻的动画状态开始。
animation-iteration-count
动画的播放次数，默认值是数值1，即只播放1次动画
- infinite
  动画无限循环播放
- 数值
  可以是小数。比如0.5，表示动画播放到动画周期的一半就停止。
animation-play-state
动画是运行还是停止。
- running
  动画正在运行
- paused
  动画停止
animation-fill-mode
animation-fill-mode用来控制元素在动画执行前、动画执行后的样式。
动画按执行时间来划分，分为三个过程：动画等待、动画进行和动画结束。
默认情况下（animation-fill-mode:none），只有在动画进行状态，才会应用@keyframes所声明的动画。而在动画等待、动画结束状态，对元素样式不会产生任何影响。
animation-fill-mode有四个值，分别是
- none
  默认值，告诉浏览器，动画不会对动画等待、动画结束时的元素样式产生任何影响。
- forwards
  告诉浏览器，动画结束时，元素样式将设置为动画最后一帧的样式。
- backwards
  告诉浏览器，动画等待时，元素样式设置为动画第一帧的样式。
- both
  告诉浏览器，动画等待时，元素样式设置为动画第一帧的样式；动画结束时，元素样式设置为动画最后一帧的样式。
animation-direction
这是一个实验中的功能。动画是否反向播放，有以下四个值，
- normal，默认值。每个动画循环结束，动画重置到起点重新开始。
- alternate。动画交替反向进行，反向运行时，动画按步后退。
- reverse。反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse。反向交替，反向开始交替。
  最后，还是看例子吧。

球体的弹跳

<body>
  <div class="ball"></div>
</body>

@keyframes bounce {
  60%,80%,to{
    transform:translateY(350px);
  }
  70%{
    transform:translateY(250px);
  }
  90%{
    transform: translateY(300px);
  }
}
.ball{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: radial-gradient(farthest-corner at 20px 20px,#fff,orange);
  animation:bounce 3s;
}

在这里插入图片描述

此次动画中，
关键帧70%时垂直位移是250px，关键帧80%时垂直位移是350px，从250px处下降至350px处，此时调速函数是ease，动画低速开始，突然加速，最后减速结束。
实际中，球体下降，应该是突然开始，随后加速至结束，即ease-in更符合。

关键帧80%时垂直位移是350px，关键帧90%时垂直位移是300px，从350px处回弹至300px，此时调速函数仍是默认值ease，动画低速开始，突然加速，最后减速结束。
实际中，球体回弹，应该是突然开始，随后减速至结束，即ease-out更符合。

所以作如下改进：

@keyframes bounce {
  60%,80%,to{
    transform:translateY(350px);
    animation-timing-function: ease-out;
  }
  70%{
    transform:translateY(250px);
  }
  90%{
    transform: translateY(300px);
  }
}
.ball{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: radial-gradient(farthest-corner at 20px 20px,#fff,orange);
  animation:bounce 3s ease-in;
}