Cam C. Cam C. - 25 days ago 10
CSS Question

create an inverse instance of my css @-webkit-keyframes animation

So, I have the below. Which vertically marquees my 3 selected images as a CSS image carousel (from background images). I'm trying to create a second instance of this, that marquees a different set of 3 images in the opposite direction. Reversing the numbers from

-600
to
600
for example does not work. Any suggestions?




Update for visual clarification: Essentially I am trying to create two instances of this within the same parent div. The one I currently have functions like this fiddle. My only alteration is as you can see I am using background images. My second instances of this I simply want to scroll in the opposite direction, that's all - albeit my tweaks aren't getting this effect.




So, this works sliding upward. How can I achieve the opposite effect?

@-webkit-keyframes scroll {
0% { margin-top: 0; }
30% { margin-top: 0 }
60% { margin-top: -600px; }
100% { margin-top: -1200px; }
}


Full CSS.

.left {
float:left;
border-right: 4px solid white;
overflow-x:hidden;
.items {
-webkit-animation: scroll 3s infinite;
-moz-animation: scroll 3s infinite;
-ms-animation: scroll 3s infinite;
}
@-webkit-keyframes scroll {
0% { margin-top: 0; }
30% { margin-top: 0 }
60% { margin-top: -600px; }
100% { margin-top: -1200px; }
}
@-moz-keyframes scroll {
0% { margin-top: 0; }
30% { margin-top: 0 }
60% { margin-top: -600px; }
100% { margin-top: -1200px; }
}
@-ms-keyframes scroll {
0% { margin-top: 0; }
30% { margin-top: 0 }
60% { margin-top: -600px; }
100% { margin-top: -1200px; }
}
#bg1 {
width: 670px;
height: 600px;
background: url(/../../../../wp-content/uploads/2016/11/left_hpslide2.jpg);
background-size: 100%;
background-repeat:no-repeat;
display: block;
}
#bg2 {
width: 670px;
height: 600px;
background: url(/../../../../wp-content/uploads/2016/11/left_hpslide3.jpg);
background-size: 100%;
background-repeat:no-repeat;
display: block;
}
#bg3 {
width: 670px;
height: 600px;
background: url(/../../../../wp-content/uploads/2016/11/left_hpslide1.jpg);
background-size: 100%;
background-repeat:no-repeat;
display: block;
}
}


So, here is where I'm at currently within my attempt at a second instance.

.right {
float:right;
overflow-x:hidden;
.items {
-webkit-animation: upscroll 3s infinite;
-moz-animation: upscroll 3s infinite;
-ms-animation: upscroll 3s infinite;
overflow-x:hidden;
}
@-webkit-keyframes upscroll {
0% { margin-top: 0; }
30% { margin-top: 600 }
60% { margin-top: 1200px; }
100% { margin-top: 1800px; }
}
@-moz-keyframes upscroll {
0% { margin-top: 0; }
30% { margin-top: 600 }
60% { margin-top: 1200px; }
100% { margin-top: 1800px; }
}
@-ms-keyframes upscroll {
0% { margin-top: 0; }
30% { margin-top: 600 }
60% { margin-top: 1200px; }
100% { margin-top: 1800px; }
}


Here is my mark-up.

<div class="verticalbgslide">

<div class="left">

<div class="scrollable items">

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

</div>
</div>

<div class="right">

<div class="scrollable items">

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

</div>
</div>
</div>

Answer

Just reverse the actual frames. The key thing here to think about is that the frames themselves need to be the same to show the images according to the html provided, you just need to change the order to change the animation:

@-webkit-keyframes scroll {
  0%   { margin-top: -1000px; }
27.33%  { margin-top: -1000px; }
  33.33%  { margin-top: -500px; }
60.66% { margin-top: -500px; }
66.66% { margin-top: 0px; }
94.99% { margin-top: 0px; }
  100%  { margin-top: -1000px; }
}

Here's a fiddle:

http://jsfiddle.net/c8u0h0o0/

Comments