CODEWITHSUNDEEP
htmlcss
Jayve
Jayve

Reputation: 79

CSS3 multiple animation: not clear at all

I'm trying to make a simple animation that consists of multiple images coming from diferent directions and finally aligning each one next to the other. This is by only using CSS3, without using javascript. However, since I haven't done any animation with it, I'm pretty confused and I'm pretty sure I'm not doing it properly. This is the jsfiddle with code of what I've done right now, and it's working as intended:

Jsfiddle

Nevertheless I'm confused because I don't understand the @-webkit-keyframes / @keyframes rule.

On the first img (red one) it moves exactly from left 0px to 300px, while the second img (blue) should move from left 400px to -100px, so technically it would go outside and disappear, yet it moves behind next to the img1.

Last but not least, the third img (green) should be next to the blue one and would outside together, but it moves right behind it.

Why is it? Could someone explain me easily how does animation work please? Is there a better way to do it?

In case the link doesn't work, this is the code:

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
        <div id="img1"/>
        <div id="img2"/>
        <div id="img3"/>
</body>
</html>

CSS

#img1, #img2, #img3 {
    width: 100px;
    height: 30px;
    position: relative;
}

#img1 {
    background: red;
    -webkit-animation: first 5s infinite; /* Chrome, Safari, Opera */
    animation: first 5s infinite;
}

#img2 {
    background: blue;
    -webkit-animation: second 5s infinite; /* Chrome, Safari, Opera */
    animation: second 5s infinite;
}

#img3 {
    background: green;
    -webkit-animation: third 5s infinite; /* Chrome, Safari, Opera */
    animation: third 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes first {
    from {left: 0px;}
    to {left: 300px;}
}

@keyframes first {
    from {left: 0px;}
    to {left: 300px;}
}

@-webkit-keyframes second {
    from {left: 400px;}
    to {left: -100px;}
}

@keyframes second {
    from {left: 400px;}
    to {left: -100px;}
}

@-webkit-keyframes third {
    from {left: 300px;}
    to {left: -100px;}
}

@keyframes third {
    from {left: 300px;}
    to {left: -100px;}
}

Thank you in advance for your help.

Upvotes: 2

Views: 64

Answers (2)

Sebastian Homeier
Sebastian Homeier

Reputation: 487

I hope I understood your problem correctly. You're using the shorthand-close syntax on your div tags which should only be used on certain tags (e.g. img). Your HTML code results in this structure:

    <div id="img1">
      <div id="img2">
        <div id="img3"></div>
      </div>
    </div>

Change it to:

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>

If you want to align all divs in one line either set their position to absolute or move #img2 and #img3 up:

#img1, #img2, #img3 {
    width: 100px;
    height: 30px;
    position: absolute;
}

or

#img1, #img2, #img3 {
    width: 100px;
    height: 30px;
    position: relative;
}

#img2 {
    ...
    top: -30px;
}

#img3 {
    ...
    top: -60px;
}

Upvotes: 1

Guy
Guy

Reputation: 1444

It's because #img1, #img2, #img3 are in relative position... You want an animation relative to the browser window so you have to use fixed positioning. 

#img1, #img2, #img3 {
    width: 100px;
    height: 30px;
    position: fixed;
}

Working demo : Fiddler

(More information about CSS Positioning)

Upvotes: 1

Related Questions