背景图片上滑过渡答案

【问题标题】：Background image slide up transition背景图片上滑过渡
【发布时间】：2017-03-07 03:21:25
【问题描述】：

旋转滑块可以选择设置上滑图像过渡，我正在尝试复制该效果，这样我就可以在没有旋转滑块的情况下使用它..

这是page，我正在尝试采用上述过渡效果。

我试过这个 CSS 但没有运气，我不知道如何使用关键帧来制作动画。

谢谢

.full-img.parallax-yes{
    overflow-y: hidden;
    max-height: 330px;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition: background-position 1s;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 0% 0% 0px;
}

【问题讨论】：

何时幻灯片？还是什么活动？
页面加载事件
只触发 1 个动画然后停止？

标签： css css-transitions css-animations keyframe

【解决方案1】：

希望这是您正在尝试的，简单的background-image slide-up animation 使用CSS animation。

在父 div 中定义两个不同的类，一个用于background image，另一个用于定位为绝对的text，position:absolute，移动背景图像up-side 在关键帧中使用background-position-y 和@ 987654328@，用于向下background-position-y和positive values。

@-webkit-keyframes ani{
 from{
     background-position-y:0px;
 }
 to{
     background-position-y:-100px;
   }
}

#bx{
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;
 }
 #bx > .iim{
  width:100%;
  height:600px;
  background:url('https://source.unsplash.com/user/erondu');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:fixed;
  animation:an 5s forwards;
  transition:5s ease forwards;  
 }
@-webkit-keyframes an{
  from{
    background-position-y:0px;
  }
  to{
    background-position-y:-100px;
  }
}

#bx > .txt{
  width:100%;
  height:300px;
  overflow:hidden;
  position:absolute;
  color:black;
  font-size:32px;
  z-index:6;
  top:0;
  left:0;
}

<div id="bx">
<div class="iim">
</div>
<div class="txt">
Replace following content by your text.
</div>
</div>

【讨论】：

【解决方案2】：

这里我给出了一个使用关键帧

的示例代码

<div class="full-height"> </div>; 


    .full-height {
      max-height: 330px;
      min-height: 330px;
      background-image: url("http://carbongroup.com.au/wp-content/uploads/2015/10/bridge.jpg");
      background-size: cover;
      background-position: 0% 0%;
      background-repeat: no-repeat;
      background-color: green;
      animation-name: move;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }

    @keyframes move {
      0% {
        background-position: 0% 0%;
      }

       100% {
        background-position: 100% 100%;

      }
    }

【讨论】：

我已经更新了 css 并且过渡是从右到左的。你能检查一下吗？我认为我们需要将背景位置调整为负面。这是页面网址carbongroup.com.au/accounting
使用 background-repeat: no-repeat 属性来重复图像。

【解决方案3】：

您可以这样做，并至少使用window.load()，以便动画仅在您的页面已加载时开始。

$(window).load(function(){
$('.banner').addClass('loaded');
});

.banner{
  width: 100%;
  height: 200px;
  background-image: url(https://source.unsplash.com/user/erondu);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-y: 100%;
  color: #fff;
  transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.banner.loaded{
  background-position-y: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner">
<p>this is banner text</p>
</div>

【讨论】：