Question

尝试使用2张图片进行一些CSS3过渡和动画。我们的要求是

首先显示背景图片
向北轻微移动
显示背景图像几秒钟（暂停效果）
几秒钟后介绍前景图像（淡入效果）
向北轻微移动图像
淡出前景图片

但我们无法完全达到上述目的。目前背景和前景图像几乎同时移动，无法实现“淡入淡出”。对前景图像的影响。

演示链接：https://jsfiddle.net/sandeepskm/kLtyssjc/

请帮助我们。

我们的代码

HTML5代码

<div id="a" class="animated slideInUp">
    <div id="b" class="animated slideInUpChild">
        <img src="https://cdn3.iconfinder.com/data/icons/black-easy/512/535106-user_512x512.png" width="150px" alt="" />
    </div>
</div>

CSS3代码

#a
{
  width: 100%;
  height: 600px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position: relative;
  background-image: url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/11-sea-beach-sand-wallpaper.jpg);
}

#b
{
  width: 100%;
  height: 10px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position: absolute;
  bottom: 0;
}

.animated
{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.slideInUp
{
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.slideInUpChild
{
  -webkit-animation-name: slideInUpChild;
  animation-name: slideInUpChild;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes slideInUp
{
  from
  {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to
  {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}

@-webkit-keyframes slideInUp
{
  from
  {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to
  {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}

@-webkit-keyframes slideInUpChild
{
  from
  {
    bottom: 0;
  }

  to
  {
    bottom: calc(100% - 100px);
  }
}

@keyframes slideInUpChild
{
  from
  {
    bottom: 0;
  }

  to
  {
    bottom: calc(100% - 100px);
  }
}

Answer 1

您可以通过执行以下更改来实现此目的：

将包含图片的元素的初始opacity设置为0，因为它需要稍后淡入。
为了确保前景图像淡入并在背景图像出现并在其位置后几秒向上移动，请添加超过背景图像animation-duration的延迟。在这里，我将其设置为2s。（我还增加了前景图像的animation-duration以使效果更加明显，但这是可选的。）
在前景图像的关键帧设置中，将初始状态设为opacity: 0和bottom: 150px（这等于图像的高度）。
由于前景图像有3个动画阶段（即淡入，移动和淡出），因此将分割设置为33%，66%和{{ 1}}。
100% 33%单独将opacity更改为1，bottom位置保持不变。这会产生淡入效果。
在66%保留opacity为1，但根据需要更改bottom位置。这意味着图像在仍然可见时向上移动。
在100%，保持bottom位置不变，但将opacity更改为0。这使它淡出。

修改后的CSS：

.slideInUpChild {
  opacity: 0;
  animation-name: slideInUpChild;
  animation-duration: 4s;
  animation-delay: 2s;
}
@keyframes slideInUpChild {
  0% {
    opacity: 0;
    bottom: 150px;
  }
  33% {
    opacity: 1;
    bottom: 150px;
  }
  66% {
    opacity: 1;
    bottom: calc(100% - 100px);
  }
  100% {
    opacity: 0;
    bottom: calc(100% - 100px);
  }
}

#a {
  width: 100%;
  height: 600px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position: relative;
  background-image: url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/11-sea-beach-sand-wallpaper.jpg);
  overflow: hidden;
}
#b {
  width: 100%;
  height: 10px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position: absolute;
  bottom: 0;
}
.animated {
  animation-duration: 1s;
}
.slideInUp {
  animation-name: slideInUp;
  animation-duration: 1s;
}
.slideInUpChild {
  opacity: 0;
  animation-name: slideInUpChild;
  animation-duration: 4s;
  animation-delay: 2s;
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0%, 0);
  }
}
@keyframes slideInUpChild {
  0% {
    opacity: 0;
    bottom: 150px;
  }
  33% {
    opacity: 1;
    bottom: 150px;
  }
  66% {
    opacity: 1;
    bottom: calc(100% - 100px);
  }
  100% {
    opacity: 0;
    bottom: calc(100% - 100px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="a" class="animated slideInUp">
  <div id="b" class="animated slideInUpChild">
    <img src="https://cdn3.iconfinder.com/data/icons/black-easy/512/535106-user_512x512.png" width="150px" alt="" />
  </div>
</div>

前景图像的淡入效果

1 个答案: