Right now your arrow bounces as soon as your webpage has been loaded. Let’s briefly check out a few variations we can make to our existing animation. That’s usually where I have my “aha” moments.ĬSS animations have countless possibilities. It’s often easier to drive a concept home if you experiment with the extremes. Then try to give it a value of 100ms (you can use milliseconds instead of seconds). Try to give the 40% keyframe a transform translate property of -48px and see what happens.Īnimation property a duration of 5 seconds instead of 2.With a bit of practice, it’ll be much easier to connect the dots. If the CSS for the animation is confusing, try messing around with the duration and CSS but that only gives us more wiggle room, since there isn’t one way to do it. How much a ball bounces (and how high) is of course determined by multiple factors, like weight, speed, material type etc. The second down a ball hit the ground it will move up way less than the first time. I decided to only move the arrow by -12px on the third position because it mimics a real-life bouncing ball. That’s what makes the arrow to move up and down twice, relatively fast within a short period. In-between the two keyframes where the arrow moves up (40% and 60%) it moves back to Y(0) at the 50% keyframe. Inside your CSS stylesheet, add the following rule-sets (classes, properties, and values): Ok next up let’s add a bit of styling, and then we’ll get on to the fun part, with CSS animations! Added a class: arrow-circle-down which we’ll need in the CSS section.I removed the width and height properties (the original file is way too big).
If you compare the original SVG source to the one you see in the HTML markup above, you can see that I made a few changes: There are many other ways to add SVGs for different purposes - but I’ll save that for a different tutorial. You can save a lot of resources by downloading the 5-10 icons that you actually need in SVG format.įor this example, we’re embedding the SVG file directly in the HTML markup. A lot of websites load the entire Font Awesome library on their website, but they only use a small handful of icons - that’s a waste of bandwidth.
0 kommentar(er)
