Background image slide up transition - css

Question

Revolution slider have option to set slide up image transition and I'm trying to copy that effect so I can use this without revolution slider..
This is slide transition effect.
This is the page where I'm trying to adopt above transition effect.
I tried this CSS but no luck, I don't know how to use key-frames for animation.
Thanks
.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

Here I have given an sample code for using the keyframes
<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 2

Hope this what you are trying for, simple background-image slide-up animation using CSS animation.
Define two different class inside of your parent div, one for background image and another for text which is positioned as absolute, position:absolute, to move background-image up-side use background-position-y in keyframes and negative value, for downward background-position-y and 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 3

You can do like this, and use at lease window.load() so the animation start only, when your page already loaded.
$(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>