Fade in, then slide to left, then fade in another image

Report · Feb 16, 2017

Hi all,

I'm new to dreamweaver and have only learnt the basics of coding recently and seem to be hitting a brick wall at the moment.

Basically, I am creating a holding page for a website that I'm (trying) to create.

I would like the logo (which is 50 x 50px and centred in the page) to fade in for about 2 seconds then slide to the left to allow another image (which is 50 x 415px) to fade in while keeping them centred.

It seems I may have been a little over-ambitious given my skillset but now that I've decided on what I want it to do, I feel I would be failing if I didn't learn how to do it!

Any help would be much appreciated!!

Report · Feb 16, 2017

You can use CSS to perform those functions.

Have a look at

CSS3 Animations
animation | CSS-Tricks
https://codepen.io/dudleystorey/pen/ehKpi
Google: 'CSS Animations'

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 17, 2017

Those specification are not very large 50px x 50px. Example below you can play around with. Its not very responsive either.

<!DOCTYPE html>

<html>

<head>

<title>Animation</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.holder {

position: relative;

width: 500px;

height: 50px;

}

img {

max-width: 100%;

height: auto;

}

.box_1 {

width: 50px;

height: 50px;

margin: 0 225px;

position: absolute;

animation-name: slideimage;

animation-delay: 3s;

animation-duration: 2s;

animation-iteration-count: 1;

animation-fill-mode: forwards;

}

.box_2 {

width: 448px;

position: absolute;

right: 0;

animation-delay: 12s;

}

.img_1 {

animation-duration: 4s;

animation-name: fadeIn;

display: block;

height: 50px;

}

.img_2 {

animation-duration: 10s;

animation-name: fadeIn2;

background-color: plum;

height: 50px;

}

@keyframes fadeIn {

0% { opacity: 0; }

100% { opacity: 1; }

}

@keyframes slideimage {

0% {right:0; top:0;}

100% {right:225px; top:0;}

}

@keyframes fadeIn2 {

0% { opacity: 0; }

50% { opacity: 0; }

100% { opacity: 1;}

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

Fade in, then slide to left, then fade in another image

1 Correct answer