Html 从右向左移动图像-动画不工作_Html_Css

Html 从右向左移动图像-动画不工作

html css

Html 从右向左移动图像-动画不工作,html,css,Html,Css,我想从右向左移动图像，图像应该从屏幕右侧进入，从屏幕左侧退出，因为我已经编写了这个css动画代码，但它不工作，请帮助 .CSS文件 .imageAnimation { position: 100% 0px; -webkit-animation: moveToLeft 10s linear infinite; animation: moveToLeft 10s linear infinite; } @-webkit-keyframes moveToLeft {

我想从右向左移动图像，图像应该从屏幕右侧进入，从屏幕左侧退出，因为我已经编写了这个css动画代码，但它不工作，请帮助

.CSS文件

.imageAnimation { 
    position: 100% 0px;
    -webkit-animation: moveToLeft 10s linear infinite;
    animation: moveToLeft 10s linear infinite;
}

@-webkit-keyframes moveToLeft {
    from {position: 100% 0px;}
    to {position: 0% 0px;}
}

@keyframes moveToLeft {
    from {position: 100% 0px;}
    to {position: 0% 0px;}
}

<!DOCTYPE html>
<html>

    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="animation.css"/>
    </head>

    <body>
        <img class="imageAnimation" style="position:absolute; top:0px; left:100%;" src="enemy.png" width="300" height="100"/>
    </body>

</html>

.HTML文件

.imageAnimation { 
    position: 100% 0px;
    -webkit-animation: moveToLeft 10s linear infinite;
    animation: moveToLeft 10s linear infinite;
}

@-webkit-keyframes moveToLeft {
    from {position: 100% 0px;}
    to {position: 0% 0px;}
}

@keyframes moveToLeft {
    from {position: 100% 0px;}
    to {position: 0% 0px;}
}

<!DOCTYPE html>
<html>

    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="animation.css"/>
    </head>

    <body>
        <img class="imageAnimation" style="position:absolute; top:0px; left:100%;" src="enemy.png" width="300" height="100"/>
    </body>

</html>


例子

事实上，您已经非常接近了……只是使用不正确而已。使用

顶部

和

左侧

.imageAnimation { 
    position: absolute;
    left: 100%;
    top: 0px;
    -webkit-animation: moveToLeft 10s linear infinite;
    animation: moveToLeft 10s linear infinite;
}

@-webkit-keyframes moveToLeft {
    from {left: 100%;}
    to {left: 0%;}
}

@keyframes moveToLeft {
    from {left: 100%;}
    to {left: 0%;}
}

试试这个

正文{
位置：相对位置；
溢出x：隐藏；
}
img{
位置：绝对位置；
动画：moveImage 3s线性无限；
左：-350px；
}
@关键帧移动图像{
100% {
转换：translateX（计算（100vw+350px））；
}
}

我的答案使用了

calc

和百分比，因此该框将从屏幕右侧以外、视图端口区域和屏幕左侧开始。你可以。代码如下：

.wrap {
  background: pink;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.box {
  animation-name: moveToLeft;
  animation-duration: 5s;
  background-color: red;
  height:100px;
  left:calc(0% - 100px);
  position:absolute;
  width:100px;
}
@keyframes moveToLeft {
    0% {left:calc(100% + 100px);}
    100% {left:calc(0% - 100px);}
}

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{
背景：粉红色；
高度：200px；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
.盒子{
动画名称：moveToLeft；
动画持续时间：5s；
背景色：红色；
高度：100px；
左：计算（0%-100px）；
位置：绝对位置；
宽度：100px；
}
@关键帧移动到左侧{
0%{左：计算（100%+100px）；}
100%{左：计算（0%-100px）；}
}

我使用带有

溢出：隐藏的父容器，因此当框超出框架时，滚动条不会显示。此外，您在calc
中看到的100px
需要与您的元素具有相同的宽度。这是一本书。希望能有所帮助。
您有codepen或JSFIDLE示例吗？