专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-11-09 11:22:39 基础教程 11 ℃

效果图:

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

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

  • 所有代码
<!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...）正向播放。

Tags：

猜你喜欢

最近发表
标签列表