фонового изображения слайд вверх переход

Question

Revolution слайдер имеет возможность установить слайд вверх переход изображения, и я пытаюсь скопировать этот эффект, так что я могу использовать это без слайдера революции ..

Это 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

Надежда это то, что вы пытаетесь для, простой background-image slide-up animation с помощью CSS animation.

Определить два разных класса внутри вашего родительского DIV, один для background image и другой для text который позиционируется как абсолютное, position:absolute, перемещать фоновое изображение up-side использование background-position-y в ключевых кадров и negative value, для нисходящего 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>

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

     } 
    } 

Answer 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>