网站首页 > 知识剖析正文

使用CSS的animation-direction属性让动画缓慢回弹

nixiaole 2024-11-08 17:14:15 知识剖析 47 ℃

效果图:

如果没有animation-direction: alternate;属性的话, 那么每次完成动画帧, 就会立刻恢复到起始位置, 中间没有缓冲过程, 看起来就很生硬

所有代码

<!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>Document</title>
    <style>
      body {
        display: flex;
      }
      .ball {
        width: 100px;
        height: 100px;
        background: orange;
        border-radius: 50%;
        animation: ball 2s infinite;
        margin-left: 100px;
        text-align: center;
        line-height: 100px;
      }

      .ball2 {
        /* 属性定义是否循环交替"反向"播放动画。 如果动画被设置为只播放一次，该属性将不起作用。*/
        animation-direction: alternate;
      }

      @keyframes ball {
        to {
          transform: translateY(200px);
        }
      }
    </style>
  </head>
  <body>
    <div class="ball ball1">无</div>
    <div class="ball ball2">有</div>
  </body>
</html>

animation-direction属性

normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

上一篇：现代CSS:纯 CSS 实现飘雪动画效果
下一篇：居然可以通过动画快速学习 css 要运用css动画需要运用什么规则

网站首页 > 知识剖析 正文

使用CSS的animation-direction属性让动画缓慢回弹

animation-direction属性

猜你喜欢

网站首页 > 知识剖析正文