css - 背景图片向上滑动过渡

Question

Revolution slider 可以选择设置向上滑动图像过渡，我正在尝试复制该效果，因此我可以在没有 revolution slider 的情况下使用它..

这是 slide transition effect .

这是 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;
}

Answer 1

这里我给出了使用关键帧

的示例代码

<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%;

      }
    }