How to Stop a CSS Keyframe Animation

How can I stop a CSS keyframe animation?

You need to set the animation-iteration-count:

animation-iteration-count: 1;

For more details, have a look at:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

...and:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

You've provided very limited information about your problem. This solution might not be exactly what you're looking for. Add some more detail to your question and I'll update this answer if necessary.

Vendor Prefixes: You may add vendor prefixes (-webkit-, -moz-, -o-) like e.g. -webkit-animation-iteration-count: 1; for browser support and to target specific browsers allowing to set custom values for them.

How to prevent a CSS keyframe animation from running on page load?

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){    var c = document.getElementById('container');    function addAnim() {        c.classList.add('animated')        // remove the listener, no longer needed        c.removeEventListener('mouseover', addAnim);    };
    // listen to mouseover for the container    c.addEventListener('mouseover', addAnim);})();

#container {    position:relative;    width:100px;    height:100px;    border-style:inset;}#content {    position:absolute;    top:100px;    width:100%;    height:100%;    background-color:lightgreen;    opacity:0;}
/* This gets added on first mouseover */#container.animated #content {    -webkit-animation:animDown 1s ease;}
#container:hover #content {    -webkit-animation:animUp 1s ease;    animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes animUp {    0% {        -webkit-transform:translateY(0);        opacity:0;    }    100% {        -webkit-transform:translateY(-100%);        opacity:1;    }}@-webkit-keyframes animDown {    0% {        -webkit-transform:translateY(-100%);        opacity:1;    }    100% {        -webkit-transform:translateY(0);        opacity:0;    }}

<div id="container">    <div id="content"></div></div>

Smoothly stop CSS keyframe animation

You aren't going to like this answer, but reality is that CSS3 animations aren't really useful to achieve this. To make this work you would need to replicate a lot of your CSS in your Javascript which kind of destroys the point (Like for example in this closely related answer Change speed of animation CSS3?). To really make it stop smoothly your best bet would be to write the animation on a platform like the Greensock animation library which provides all the tools you need to make it actually smoothly stop instead of suddenly stop.

How to prevent css keyframe animation on page load?

All you should need to do is:
animation-play-state: paused;

However, having a look at your codepen, keyframe animations probably aren't your best best. It looks like you're just using the keyframes to ensure some of your properties only change at the end of the animation. Luckily, there's actually a transition timing function for this!

Use transition property, using step-end and step-start for visibility and pointer-events.
Pointer events used to prevent interaction with a hidden element.
Max-height used to remove the object from document flow when hidden.

I've spun together a quick code pen to show an example.

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100

How to stop CSS Animation in Specific place on the Path. Without Timing

does this helps ?

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

var x = document.createElement("IMG");

            x.setAttribute("src", imgArray[0].src);

            x.classList.add("ball");

            x.setAttribute("id", "0");

            x.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");

            x.setAttribute("alt", "Image");

            x.style.animationFillMode = "forwards";

            document.getElementById("SpinningImages").appendChild(x);

@keyframes FourthBallStarting {
0% {
offset-distance: 0%;
visibility: hidden;
transform: rotateZ(0);
opacity: 0;
}
12.5%{
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
}
15% {
offset-distance: 3%;
opacity: 1.0;
visibility: visible;}
50% {
offset-distance: 3%;
opacity: 1.0;
visibility: visible;}
80% {
transform: 0;
}
90% {
offset-distance: 23%;
opacity: 1;
visibility: visible;
} 99%,100% {
offset-distance: 25%;
visibility: hidden;
transform: rotateZ(-90deg);
opacity: 0;
}
}
.ball {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%;
border: 1px solid black;
animation-fill-mode: forwards;
offset-path: path("M445 1.5C503.241 1.5 560.912 12.9715 614.72 35.2594C668.528 57.5474 717.419 90.2154 758.602 131.398C799.785 172.581 832.453 221.472 854.741 275.28C877.029 329.088 888.5 386.759 888.5 445C888.5 503.241 877.029 560.912 854.741 614.72C832.453 668.528 799.785 717.419 758.602 758.602C717.419 799.785 668.528 832.453 614.72 854.741C560.912 877.029 503.241 888.5 445 888.5C386.759 888.5 329.088 877.028 275.28 854.741C221.472 832.453 172.581 799.785 131.398 758.602C90.2152 717.419 57.5473 668.528 35.2593 614.72C12.9714 560.912 1.49997 503.241 1.5 445C1.50003 386.759 12.9715 329.088 35.2595 275.28C57.5475 221.472 90.2155 172.581 131.398 131.398C172.581 90.2152 221.472 57.5473 275.28 35.2593C329.088 12.9714 386.759 1.49996 445 1.5L445 1.5Z");
margin-left: -410px;
}

`

<div id="SpinningImages" class="SpinningImages">
            </div>
            <div id="BigCircle" >

            </div>