Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Steve Pierce
Steve Pierce
Courses Plus Student 1,091 Points

CSS Animation: I have to get the balls in the picture to collide against each other.

Like I said up top. I have to get the balls to move and eventually collide against each other. The animation must be for each ball and named moveRed and moveBlue.

Add 0% time you must set the left position of the red ball to 0 px and add a drop shadow with a horizontal offset of -40px, vertical offset of 20px, and a blur radius of 25px, add color value of rgb(51, 51, 51). Remember to use filter property with drop-shadow.

At 49% time, use transform property with the scaleX function to set the horizontal scale of the red ball to 1.

At 50% time, set the left position of the red ball to 380px. Set the drop shadow to an offset of 0px in the horizontal and vertical direction with a blur of 0 px and a color of rgb(51, 51, 51). Set the value of scaleX function used with the transform property of 0.4.

At 51% time, set the value of scaleX function to 1.0.

At 100% time, set the left position of the red ball to 0 px. Set the offset of the drop shadow to -40px in the horizontal direction and 20 px in the vertical direction with a blur of 25 px and a color of rgb(51, 51, 51).

Apply the moveRed animation to the redBall image over a 5-second interval with linear timing and infinite looping.

I'm not going to post about the blue ball because its very similar to the red ball and I just need a starting point. Below is my current code. The code in question falls under the ba_animate.css posted last. Thank you in advance for any help any of you can provide.

HTML

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="utf-8" /> <title>Big Apple Physics: Conservation of Momentum</title> <link href="ba_reset.css" rel="stylesheet" /> <link href="ba_styles.css" rel="stylesheet" /> </head>

<body> <header> <img src="ba_logo.png" alt="Big Apple Physics" id="logoimg" /> <nav class="horizontal"> <ul> <li><a href="#">lectures</a></li> <li><a href="#">animations</a></li> <li><a href="#">forums</a></li> <li><a href="#">search</a></li> </ul> </nav> </header> <article> <h1>Conservation of Momentum</h1> <p>In an earlier <a href="#">lecture</a>, we learned from Newton's 3rd Law of Motion that <em>for every action, there is an equal and opposite reaction.</em> One consequence of this law is that if two objects collide the force applied from the first object to the second will be equal and opposite of the force applied from the second object to the first. The result is that the total momentum (<var>p</var>) of all of the objects in the system is the same before and after the collision. This principle is known as the <strong>Conservation of Momentum</strong>.</p> <p>In the animation below we have two objects approaching each other on a collision course. The 10kg red ball is moving at +1m/s and the 5kg blue ball is moving at −1 m/s. The total momentum within the system is therefore:</p>

  <code>
     <var>p</var> = <var>m</var><sub>red</sub><var>v</var><sub>red</sub> 
     + <var>m</var><sub>blue</sub><var>v</var><sub>blue</sub>
  </code>
  <code>
     <var>p</var> = (10kg)(1m/s) + (5kg)(&minus;1m/s) = 5 kg&#183;m/s
  </code>

  <p>If the red ball rebounds at a velocity of &minus;1 m/s, the 
     blue ball must rebound with a velocity of +3 m/s to keep the total 
     momentum of the system at 5 kg&#183;m/s, because: </p>

  <code>
     <var>p</var> = (10kg)(&minus;1m/s) + (5kg)(3m/s) = 5 kg&#183;m/s
  </code>

  <div id="animBox">
     <img src="ba_redball.png" id="redBall" class="ballImg" alt="" />
     <img src="ba_blueball.png" id="blueBall" class="ballImg" alt="" />
     <div id="redSpeed1" class="animText">+1 m/s</div>
     <div id="blueSpeed1" class="animText">&minus;1 m/s</div>
     <div id="redSpeed2" class="animText">&minus;1 m/s</div>
     <div id="blueSpeed2" class="animText">+3 m/s</div>
     <div id="momentum" class="animText">Total Momentum: 5kg &#183; m/s</div>
  </div>

  <p>The Conservation of Momentum
     assumes a closed system in which there are no other forces 
     interacting with the two objects. If there is an external force, 
     it will cause a change in momentum in the 
     entire system. For example, the momentum will be 
     changed by the force of friction, eventually leading to complete 
     loss of velocity and momentum.</p>

</article> <footer> Big Apple Physics © 2018 English (US) <span> <a href="#">About</a> <a href="#">Developers</a> <a href="#">Terms</a> </span> </footer> </body> </html>

CSS Stylesheet Reset

@charset "utf-8";

/* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 8 Case Problem 2

Big Apple Physics Reset Style Sheet

Filename: ba_base.css

*/

/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }

address, article, aside, blockquote, body, cite, div, dl, dt, dd, em, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, html, img, li, main, nav, nav a, ol, p, section, span, ul, table, tr, td, th, col, colgroup { margin: 0; padding: 0; border: 0; font-size: 100%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

/* Set the default page element styles */

body { line-height: 1.2em; }

ul, ol { list-style: none; }

nav ul { list-style: none; list-style-image: none; }

nav a { text-decoration: none; }

CSS Stylesheet Animate

nav a { background-image: url(ba_target.png); background-repeat: no-repeat; background-position: center; background-size: 0% 0%; color: rgb(253, 240, 133); transition: background-size 0.3s, color 0.8s; }

nav a:hover { background-size: 100% 100%; color: rgb(244, 130, 130); }

/* Animation Styles */

@keyframes moveRed { 0% {left: 0px; filter: drop-shadow(-40px 20px 25px rgb(51, 51, 51);} 49% {transform: scaleX(1);} 50% {left: 380px; filter: drop-shadow(0px 0px 0px rgb(51, 51, 51); transform: scaleX(0.4);} 51% {transform:scaleX(1);} 100% {left: 0px; filter: drop-shadow(-40px 20px 25px rgb(51, 51, 51);} }

@keyframes moveBlue {
0% {right: 0px; filter: drop-shadow(40px 20px 25px rgb(51, 51, 51);} 49% {transform: scaleX(1);} 50% {right: 380px; filter: drop-shadow(40px 20px 25px rgb(51, 51, 51); transform: scaleX(0.4);} 51% {transform:scaleX(1);} 100% {right: -700px; filter: drop-shadow(120px 20px 25px rgb(51, 51, 51);} }

@keyframes showText { 0% {opacity: 0;} 49% {opacity: 0;} 51% {opacity: 1;} 100% {opacity: 1;} }

@keyframes hideText { 0% {opacity: 1;} 49% {opacity: 1;} 51% {opacity: 0;} 100% {opacity: 0;} }

img#redBall { animation: 5s linear infinite; }

img#blueBall { animation: 5s linear infinite; }

div#redSpeed1 { animation: 5s liner infinite; }

div#blueSpeed1 { animation: 5s liner infinite; }

div#redSpeed2 { animation: 5s liner infinite; }

div#blueSpeed2 { animation: 5s liner infinite; }

2 Answers

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

Hey Steve. On my initial scan of your code, it looks like you're missing the closing parenthesis on every one of your drop-shadow() functions. I'm putting it all into Codepen to see what's up, if anything, beyond that.

It helps me to expand my CSS out as I write, then compress when I send to production (using a SCSS compiler or something). Here's the code in the Animation Styles section, expanded and fixed:

/* Animation Styles */

@keyframes moveRed {
  0% {
    left: 0px;
    filter: drop-shadow(-40px 20px 25px rgb(51, 51, 51));
  }
  49% {
    transform: scaleX(1);
  }
  50% {
    left: 380px;
    filter: drop-shadow(0px 0px 0px rgb(51, 51, 51));
    transform: scaleX(0.4);
  }
  51% {
    transform: scaleX(1);
  }
  100% {
    left: 0px;
    filter: drop-shadow(-40px 20px 25px rgb(51, 51, 51));
  }
}

@keyframes moveBlue {
  0% {
    right: 0px;
    filter: drop-shadow(40px 20px 25px rgb(51, 51, 51));
  }
  49% {
    transform: scaleX(1);
  }
  50% {
    right: 380px;
    filter: drop-shadow(40px 20px 25px rgb(51, 51, 51));
    transform: scaleX(0.4);
  }
  51% {
    transform:scaleX(1);
  }
  100% {
    right: -700px;
    filter: drop-shadow(120px 20px 25px rgb(51, 51, 51));
  }
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hideText {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
Steve Pierce
Steve Pierce
Courses Plus Student 1,091 Points

Thanks for your help Matt, I still can't seem to get it working. But I will keep trying.

Matt Brock
Matt Brock
28,330 Points

Welcome! I messed around with it a bit on Codepen and got them colliding (didn't have the image assets so I had to fudge the CSS a bit: https://codepen.io/mattpbrock/pen/gXMNGa?editors=1100. Not sure of what the whole problem is trying to achieve, but the general idea is to make them touch in the middle?

Steve Pierce
PLUS
Steve Pierce
Courses Plus Student 1,091 Points
Steve Pierce
Steve Pierce
Courses Plus Student 1,091 Points

Yes, the idea was to get them to meet in the middle and bounce off each other. I finally got it working. My animations were not named properly but I really do appreciate ALL your help!