fade-in effect for a foreground image - html

Question

Trying to do some CSS3 transitions and animations using 2 images.
Our requirement is
First display the background image
Move it slightly on the northward direction
Display the background image for few seconds (pause effect)
After few seconds introduce the foreground image (fade in effect)
Slightly move the image in northward direction
Fade out the foreground image
But we are unable to achieve the above exactly. Currently the background and foreground image are moving almost at the same time, unable to achieve the 'fade in' effect for the foreground image.
Demo Link: https://jsfiddle.net/sandeepskm/kLtyssjc/
Please help us out.
Our code
HTML5 Code
<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 Code
#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

You can achieve this by doing the following changes:
Set initial opacity of the element that contains the image as 0 because it needs to fade-in later.
To make sure that the foreground image fades-in and moves up a few seconds after background image has appeared and taken its position, add a delay that is more than animation-duration of the background image. Here, I have set it as 2s. (I have also increased animation-duration of the foreground image to make the effect more visible but that is optional).
Within the keyframes setting for the foreground image, make the initial state as opacity: 0 and bottom: 150px (this is equal to the height of the image).
Since there are 3 stages of animation for the foreground image (that is, the fade-in, the move and the fade-out), set the splits as 33%, 66% and 100%.
At 33% change its opacity alone to 1 while bottom position remains the same. This produces the fade-in effect.
At 66% retain the opacity as 1 but change the bottom position as required. This means that the image moves-up while still being visible.
At 100%, retain the bottom position as-is but change the opacity to 0. This makes it fade-out.
Modified 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>