div内的图像滚动

Question

我正在尝试从 Rocket.Chat 主页实现以下滚动效果。

See effect here

网站：https://rocket.chat/

问题是我似乎无法像他们在网站中那样移动图像。有人知道为什么吗？或者可以举个例子吗？

我的组件.html

<section class="community py-5">
    <div class="container">
        <div class="content d-flex">
            <div class="content-info">
                <div class="mb-5">
                    <h3>Lorem ipsum text</h3>
                </div>
                <div class="text-wrapper">
                    <div class="text">
                        Some information to be said
                    </div>
                </div>
                <div class="btn-wrapper mt-5">
                    <a href="#" class="btn-contract-us">
                        <div>
                            <strong>Join Us</strong>
                        </div>
                    </a>
                </div>
            </div>
            <div class="content-image">
                <img 
                    [src]="codeImg" 
                    alt="" 
                    draggable="false" 
                />
            </div>
        </div>
    </div>
</section>

我的组件.scss

.community {
    position: relative;

    .content-info {
        padding: 110px 140px 64px;
        flex: 1;
        background-color: #f7f8fa;
        // background-img
        background-position: -40px 0;
        background-size: 730px;
        background-repeat: no-repeat;

        div.text {
            margin: 0;
            font-size: 1.6rem;
            line-height: 3.2rem;
        }
        
        .btn-contract-us {
            background-color: #f5455c;
        }
    }

    .content-image {
        overflow: hidden;
        width: 30%;
        max-height: 524px;
        max-width: 430px;
        background-color: #1f2329;
        background-image: linear-gradient(180deg, #1f2329 60%, #000);

        img {
            transform: translate3d(0px, -45.9095%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);;
            transform-style: preserve-3d;
            will-change: transform;
        }
    }
}

Answer 1

您可以为此使用背景图像的 css-keyframe-animation：

.component{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image{
  width:300px;
  height:200px;
  background-image: url('https://placekitten.com/300/400');
  animation: scrollImage;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;  
}

@keyframes scrollImage{
  from{
    background-position: center 0%
  }
  to{
    background-position: center 100%
  }
}

<div class="component">
  <div class="content">
    <h1>Look, Ma!</h1>
    <p>I animated a kitten instead of sourcecode.</p>
  </div>
  <div class="image"></div>
</div>

用法：
animation-duration - 设置动画一次迭代的持续时间
动画迭代计数：无限 - 让您的动画无休止地运行
animation-direction：alternate - 让您的动画一次又一次地来回循环