div内的图像滚动

Question

我试图从火箭实现以下滚动效果。主页聊天。

看这里的效果

网站:https://rocket.chat/

问题是，我似乎不能使图像移动像他们在网站上。有人知道为什么吗?还是可以举个例子?

我component.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>

我component.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

可以使用background-image的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-iteration-count: infinite -让你的动画无限地运行
animation-direction: alternate -让你的动画一遍又一遍地循环