Why Is My Bounce Animation So Jumpy Instead of Smooth

Why is my bounce animation so jumpy instead of smooth?

The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.

.animated {  -webkit-animation-duration: .5s;  animation-duration: .5s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  -webkit-animation-timing-function: linear;  animation-timing-function: linear;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}@-webkit-keyframes bounce {  0%, 100% {    -webkit-transform: translateY(0);  }  50% {    -webkit-transform: translateY(-5px);  }}@keyframes bounce {  0%, 100% {    transform: translateY(0);  }  50% {    transform: translateY(-5px);  }}.bounce {  -webkit-animation-name: bounce;  animation-name: bounce;}#animated-example {  width: 20px;  height: 20px;  background-color: red;  position: relative;  top: 100px;  left: 100px;  border-radius: 50%;}hr {  position: relative;  top: 92px;  left: -300px;  width: 200px;}

<div id="animated-example" class="animated bounce"></div><hr>

Bootstrap collapse animation not smooth

In case anybody else comes across this problem, as I just have, the answer is to wrap the content which you want to collapse inside a div and collapse the wrapper div rather than the content itself.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo</a>    <div id="collapseOne" class="collapse">        <textarea class="form-control" rows="4"></textarea>    </div></div>
<div class="form-group">    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle</a>    <input type="text" class="form-control collapse" id="collapseTwo"></div>

Add a bounce effect at the end of css translate

Yes, you can totally do it with pure CSS. Check out the basic keyframes example below. You can easily tweak it to make it faster, smoother, longer, etc.

#bouncingObject {    /* Regular CSS for the object */    width: 100px;    height: 100px;    background-color: red;    position: absolute;    top: 200px;
    /* Handling the animation */    -webkit-animation-name: bounce;    -webkit-animation-duration: 2s;    animation-name: bounce;    animation-duration: 2s;}
/* Defining the animation by dividing it to keyframes */@keyframes bounce {    0%   {top:0px;}    25%  {top:200px;}    40%  {top:150px;}    55%  {top:200px;}    70%  {top:180px;}    85%  {top:200px;}    100% {top:200px;}}
/* This is for Safari 4.0 - 8.0 */@-webkit-keyframes bounce {    0%   {top:0px;}    25%  {top:200px;}    40%  {top:150px;}    55%  {top:200px;}    70%  {top:180px;}    85%  {top:200px;}    100% {top:200px;}}

<div id="bouncingObject"></div>

CSS3 Smooth transition when dynamically changing animations

In your case, the "jump" you notice in your animation comes from the change of animations you have installed on onmouseup. The "Bounce-Out" Animation has an initial scale of 1 (first Keyframe), and this is what the two circles immediately get set to when the animation is installed.

There are two solutions to this, which I can explain in some detail:

The Easy Way

You could just wait for the initial animation to end via the 'webkitAnimationEnd' Event and install the onmouseup event with a recursive function waiting for the animation to finish:

var initAnimationEnded = false;
document.getElementById('sports').addEventListener('webkitAnimationEnd', function() {
 initAnimationEnded = true;
}, false);

And here's the onmouseup handler:

document.getElementById('games').onmouseup = function() {
  function bounceOut() {
    if (initAnimationEnded) {
        events.style.webkitAnimationName = "Bounce-Out";
        sports.style.webkitAnimationDelay = "0.2s";
        sports.style.webkitAnimationName = "Bounce-Out";
    } else {
        setTimeout(bounceOut, 20);
    }
  }
  bounceOut();
}

I installed a jsfiddle here so you can see it working. The Bounce Out animation is only triggered after the animation finished, nothing unusual about that.

The Hard Way

You can pause the animation and parse the current values of the transformation, then install a temporary keyframe animation to bounce out. This gets much more verbose though:

First, you have to stop the animations:

events.style.webkitAnimationPlayState = "paused";
sports.style.webkitAnimationPlayState = "paused";

Then, you set up a helper to insert new css rules:

var addCssRule = function(rule) {
  var style = document.createElement('style');
  style.innerHTML = rule;
  document.head.appendChild(style);
}

Then create the css keyframe rules on the fly and insert them:

    // get the current transform scale of sports and events

    function getCurrentScaleValue(elem) {
      return document.defaultView.
      getComputedStyle(elem, null).
      getPropertyValue('-webkit-transform').
      match(/matrix\(([\d.]+)/)[1];
    }

    var currentSportsScale = getCurrentScaleValue(sports);
    var currentEventsScale = getCurrentScaleValue(events);

     // set up the first string for the keyframes rule

    var sportsTempAnimation = ['@-webkit-keyframes Sports-Temp-Bounce-Out {'];
    var eventsTempAnimation = ['@-webkit-keyframes Events-Temp-Bounce-Out {'];

     // basic bounce out animation

    var bounceOutAnimationBase = {
        '0%': 1,
        '40%': 0.1,
        '60%': 0.4,
        '80%': 0.1,
        '90%': 0.2,
        '100%': 0
    };

     // scale the animation to the current values

    for (prop in bounceOutAnimationBase) {
        sportsTempAnimation.push([
          prop, ' 
          { -webkit-transform: scale(', 
          currentSportsScale * bounceOutAnimationBase[prop], 
          ') } '].join(''));
        eventsTempAnimation.push([
           prop, 
           ' { -webkit-transform: scale(', 
           currentEventsScale * bounceOutAnimationBase[prop], 
           ') } '
         ].join(''));
    }

     // add closing brackets

    sportsTempAnimation.push('}');
    eventsTempAnimation.push('}');

     // add the animations to the rules

    addCssRule([sportsTempAnimation.join(''), 
                eventsTempAnimation.join('')].join(' '));

Then, you restart the animations with these rules:

    events.style.webkitAnimationName = "Events-Temp-Bounce-Out";
    events.style.webkitAnimationDelay = "0s";
    sports.style.webkitAnimationDelay = "0s";
    sports.style.webkitAnimationName = "Sports-Temp-Bounce-Out";
    events.style.webkitAnimationPlayState = "running";
    sports.style.webkitAnimationPlayState = "running";

Et voilà. I made a jsfiddle here so you can play around with it.

More Sugar

In your example, the circles bounce out alternating in bounce. You can easily get this back to work with the second solution by using setTimeout for all sports circle animations. I did not want to include it here because it would unnecessarily complicate the example code.
I know the provided examples are not really DRY, you could for example make all the stuff for events and sports work with half the lines of code (with meta properties), but in terms of readability, I think this example serves well.
To have this example working in all browsers with support for css3 animations, you need to normalize the transition properties. To do this in javascript, have a look here The Example works for animations and other properties as well, just replace 'transition' with the property you want
For a further read on modifying css3 animations on the fly, I found this post very useful, have a look at it as well.

Smooth Scrolling jumps weirdly

I think the problem is that you're not preventing the default click event. This means that the browser jumps to the #id you want (as this is default browser behavior) and then the smooth scroll kicks in a triggers the animation from the beginning, resulting in a quick jump.

to fix it just block the default event with preventDefault();

Quick example:

$('selector').click(function(e) {
    e.preventDefault();
    // your code
});

Fixed code:

$(function() {
    $('a[href*=#]:not([href=#])').click(function(e) {e.preventDefault(); {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                if (matchMedia('only screen and (max-width: 1000px)').matches) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 60
                    }, 1000);

                    window.location.hash = '#' + target[0].id;

                    return false;
                }
              }
            }
          }
    });
});

Height constraint animation 'jumping'

UIView.animate() can be a little tricky -- you need to call .layoutIfNeeded() on the correct view.

Replace your isExpanded / didSet in iDUMenuButton class with this:

var isExpanded = false {
    didSet {
        if isExpanded != oldValue {
            if isExpanded {
                becomeFirstResponder()
                let haptics = UIImpactFeedbackGenerator(style: .rigid)
                haptics.impactOccurred()
            }
            guard let sv = self.superview else {
                // shouldn't happen, but let's be thorough
                fatalError("Self must have a superview!!!")
            }
            // not needed
            //self.layoutIfNeeded()
            UIView.animate(withDuration: 0.3) {
                self.heightConstraint.isActive = !self.isExpanded

                // call .layoutIfNeeded() on self's superview
                //self.layoutIfNeeded()
                sv.layoutIfNeeded()

                self.layer.shadowOpacity = self.isExpanded ? 1 : 0
                self.buttons.forEach { $0.setBadgeHidden(hidden: !self.isExpanded, animated: true) }
            }
            delegate?.menuButton(self, isExpandedDidUpdate: isExpanded)
        }
    }
}

How do I add an animated bounce with jQuery?

add animate.css in page

$(document).ready(function() {$("h2").addClass("animated bounce");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/><header id="header">    <div class="overlay">    <nav>
        <a href="#projects" class="slide-section" title="">Projects</a>
        <a href="#about-me" class="slide-section" title="">About Me</a>
        <a href="#contact" class="slide-section" title="">Contact</a>    </nav>
    <h2 >Front End Developer</h2>    <h4>Making Websites for BB ♥</h4>    </div></header>

Why Is My Bounce Animation So Jumpy Instead of Smooth