0

I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the fadeShow class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.

Here is a fiddle that shows it in action:

Click here to see

.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline;
  margin: 0 100px;
  transition: 1s;
  opacity: 0;
}
.info-box.fadeShow {
  opacity: 1;
  transform: translateX(150px);
}

I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at left: 25%;, left: 45%; and left: 65%;, then I would want the boxes to be 150px to the left of that and then transition into place.

Becky
  • 2,283
  • 2
  • 23
  • 50
  • You can't transform inline elements: http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – Brian Glaz May 12 '16 at 14:39

4 Answers4

2

Firstly, to have the boxes slide over from the left, you should apply the negative transformation to the .info-box class:

transform:translatex(-150px);

And then reset it in the .fadeShow class:

transform:initial;

Secondly, you have the display property of the .info-box class set to inline, you'll need to change that as transformations can't be applied to inline elements.

Finally, for performance purposes, it's best to explicitly state which properties you want to apply transitions to:

transition:opacity 1s,transform 1s;

Or:

transition-duration:1s;
transition-property:opacity,transform;
Shaggy
  • 6,696
  • 2
  • 25
  • 45
  • Thanks. How would I get each box to fadeIn at different times? – Becky May 12 '16 at 14:47
  • That should be posted as a new question as it is beyond the scope of what you have asked here but you could create a new class for each, giving them their own `transition-delay` and/or `transition-duration`. – Shaggy May 12 '16 at 14:49
1

you need to set css transition to: transition: all 1s; since you need to tell what properties you need to animate. and using all means animate all css properties. also you need to set display: inline-block

.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline-block;
  margin: 0 100px;
  transition:all 1s;
  opacity: 0;
}
Tawfiq abu Halawah
  • 1,214
  • 1
  • 12
  • 20
  • This doesn't do anything differently. – Becky May 12 '16 at 14:29
  • I edited your code run the new code and scroll down to run the animation – Tawfiq abu Halawah May 12 '16 at 14:42
  • Thanks. How would I get each box to fadeIn at different times? – Becky May 12 '16 at 14:48
  • in css you have two different ways to animate things: using transition, or using animation and keyframes. you cant make them fadein in different times using only css transitions. you need to use css animations and key frames or javascript to do that checkout these links http://www.w3schools.com/css/css3_animations.asp http://greensock.com/ – Tawfiq abu Halawah May 12 '16 at 15:02
1

The transform isn't working because the child divs are set to display:inline.

Change that to inline-block.

JSfiddle Demo

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

Without CSS animations and calc function:

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute;
  transform: translateX(-150px);
  opacity:0
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}

#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

With CSS animations and calc function:

*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}

.box{
  width: 150px;
  height: 150px;
  position: absolute
}

#green{
  background: green;
  left: 25%;
  animation:slideinGreen .3s ease
}
#red{
  background: red;
  left: 45%;
  animation:slideinRed .6s ease
}
#yellow{
  background: yellow;
  left: 65%;
  animation:slideinYellow .9s ease
}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px); opacity: 0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px); opacity: 0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px); opacity: 0
  }
}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

Now you can add EventTarget.addEventListener() and Element.classList

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px);opacity:0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px);opacity:0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px);opacity:0
  }
}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • This is perfect. I am just tryng to figure out how to make these keyframes not begin until I am to the waypoint, – Becky May 12 '16 at 15:01
  • 1
    set classes when in viewpoint add them to divs i will update it. – Gildas.Tambo May 12 '16 at 15:05
  • I have this so far, but it isn't working. https://jsfiddle.net/99r4rk9j/1/ .... I tried adding `display: none` to the box class and then using `show()` in my waypoint to show/initiate it. – Becky May 12 '16 at 15:09
  • Thank you so much for the great answer! I really appreciate it! – Becky May 12 '16 at 15:33