Question

我想从左到右制作动画（动画从左边的不可见区域开始：-100px）并在不可见区域结束（右：-100px）我正在使用这个代码，但是在不同大小的屏幕因为％。我需要重拍它，但我不知道如何。

.ip_first_block {
    
    width: 100%;
    height: 100%;
}

section {
    position: relative;
    overflow: hidden;
} 

.ip_welcome_text {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.astronaut1 {
  position: relative;
  animation: lefttoright 10s;
  animation-fill-mode: forwards;
}

@keyframes lefttoright {
  from {
    transform: translateX(-1500%);
  }
  to {
    transform: translateX(2200%);
  }
}

<section style="height:100%;">
        <div class="ip_first_block" id="ifb">
<div class="ip_welcome_text">
<div class="astronaut1">
  <img src="images/astronaut.svg" height="70px" ; width="70px;" />
</div>
</div>
</div>
</section>

Answer 1

如果动画位置，情况会更容易，例如left 属性：

＆＃13;

body {margin: 0}

.astronaut1 {
  overflow: hidden;
}

img {
  position: relative;
  left: -70px; /* starting point; needs to be at least the img width to hide it */
  animation: lefttoright 10s forwards;
}

@keyframes lefttoright {
  to {left: 100%} /* cover the entire parent width */
}

＆＃13;

<div class="astronaut1">
  <img src="http://placehold.it/70x70" alt="" height="70" width="70">
</div>

＆＃13;

使用css从左到右创建动画表单的最佳方法

1 个答案: