How to Start CSS3 Animations at a Specific Spot

How can I animate a div to go to a specific spot on the screen?

The problem is in your nav class.
You are setting the bottom position for the nav then while animating it you're giving it a top position which is making your animation to not work.

Solution:

.nav{
position:fixed;
top: 80%; //or any value that works for you
right:0;
padding-bottom:100px;
padding-right:100px;
transition:1s;

}

This will make your animation work as you already have a top position given to the nav class.

CSS3-Animate elements if visible in viewport (Page Scroll)

Using IntersectionObserver API

The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Here's an example that triggers a classList toggle when an Element is in viewport:

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('[data-inviewport]');
ELs_inViewport.forEach(EL => {
  Obs.observe(EL, obsOptions);
});

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

Scroll down...
<div data-inviewport="scale-in"></div>
<div data-inviewport="fade-rotate"></div>

Starting a CSS animation from a different position

You can use a negative animation-delay rule to have the animation start further in their initial animation.

you could set this through some arbitrary values in your css, or apply an actual random using javascript.

.earthMini {
  border-radius: 50%;
  position: absolute;
  --radius: 1rem;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background: url("../../planetTextures/earth.jpg") repeat-x;
  background-size: 100% 100%;
  animation: earthOrbit 45s linear infinite, translateBackground 50s infinite linear;
  animation-delay: -45s; // <- this will place earth at the point of animation for 45s, 
}
@keyframes earthOrbit {
  from {
    transform: rotate(0deg) translateX(13rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(13rem) rotate(-360deg);
  }
}

your codepen with some modifications

Activate CSS3 animation when the content scrolls into view

Capture scroll events

This requires using JavaScript or jQuery to capture scroll events, checking each time a scroll event fires to see if the element is in view.

Once the element is in view, start the animation. In the code below, this is done by adding a "start" class to the element, that triggers the animation.

Updated demo

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

why is my css animation not staying in the same place?

You can do these codes.

I looked at your website.

.intro .company-name {

top:45%; // remove this

}

.start-50 {
    left: 50% !important; // remove this
}
.translate-middle {
    -webkit-transform: translate(-50%, -50%) !important; // remove this
    transform: translate(-50%, -50%) !important; // remove this
}

.intro {
    display: flex; // add this
    justify-content: center; // add this
    align-items: center; // add this
}

CSS3 Animating position

you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.

http://jsfiddle.net/aNvSf/

your modified css looks like this:

#wrapper{
    position:relative;
    top:50px;
    width:700px;
    height:320px;
    margin:0 auto;
    background:white;
    border-radius:10px;
}
#sea{
    position:relative;
    background:#2875DE;
    width:700px;
    height:170px;
    border-radius:10px;
    top:190px;
}
#sea img{
    position:absolute;
    left:480px;
    top:-20px;
    animation:myship 10s;
    -moz-animation:myship 10s; /* Firefox */
    -webkit-animation:myship 10s; /* Safari and Chrome */               
}

@keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}
@-moz-keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}
@-webkit-keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}

CSS animation from center to specific location

I removed the left from the animation and added padding and box-sizing to .title:

.title {
    position: absolute;
    min-width: 100%;
    text-align: center;
    width: auto;
    padding: 0 50px;
    box-sizing: border-box;
}
.anim {
    -webkit-animation: translate-title 2s linear;
    -webkit-animation-fill-mode: forwards;
    animation: translate-title 2s linear;
    animation-fill-mode: forwards;
}
@-webkit-keyframes translate-title {
    0% {
        min-width: 100%;
    }
    100% {
        min-width: 0;
    }
}
@keyframes translate-title {
    0% {
        min-width: 100%;
    }
    100% {
        min-width: 0;
    }
}

FIDDLE