Freeze Keyframe Animation for Debugging

Freeze keyframe animation for debugging

You could use a simple script to pause/resume the animation (http://codepen.io/anon/pen/azdBvw)

var running = true;
var elms;
document.documentElement.addEventListener("click", function(){
  elms = elms || document.querySelectorAll(".circle, .circle div");
  running = !running;
  var newVal = running ? 'running' : 'paused';
  for(var x=0; x < elms.length; x++){
    elms[x].style.webkitAnimationPlayState = newVal;
    elms[x].style.mozAnimationPlayState = newVal;
    elms[x].style.animationPlayState = newVal;
  }
})

Additionally, you can read the exact key frames offset using:

yourcssdec.cssRules[offsetOfKeyFramesDeclaration].cssRules[keyFrameNumber].keyText

console

How to pause and resume CSS3 animation using JavaScript?

Here is a solution using javascript:

var imgs = document.querySelectorAll('.pic');
for (var i = 0; i < imgs.length; i++) {  imgs[i].onclick = toggleAnimation;  imgs[i].style.webkitAnimationPlayState = 'running';}
function toggleAnimation() {  var style;  for (var i = 0; i < imgs.length; i++) {    style = imgs[i].style;    if (style.webkitAnimationPlayState === 'running') {      style.webkitAnimationPlayState = 'paused';      document.body.className = 'paused';    } else {      style.webkitAnimationPlayState = 'running';      document.body.className = '';    }  }}

.pic {  position: absolute;  opacity: 0;}
#pic1 {  -webkit-animation: pic1 4s infinite linear;}
#pic2 {  -webkit-animation: pic2 4s infinite linear;}
@-webkit-keyframes pic1 {  0% {    opacity: 0;  }  5% {    opacity: 1;  }  45% {    opacity: 1;  }  50% {    opacity: 0;  }  100% {    opacity: 0;  }}
@-webkit-keyframes pic2 {  0% {    opacity: 0;  }  50% {    opacity: 0;  }  55% {    opacity: 1;  }  95% {    opacity: 1;  }  100% {    opacity: 0;  }}
.paused {  background-color: #ddd;}

<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"><img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

UIView.animatekeyframes skips all keyframes except first

You have some very confusing constraints, and we're missing your config() func and ToastViewModel and an example view controller showing how you set things up...

But, after taking some guesses to fill in the missing pieces, your animation code works for me - although it animates the view up and then *immediately down.

As is obvious, animateKeyframes uses relative times. You can think of those start and duration values as percentages of the total duration.

So, if you wanted a 1-second UP animation, then pause for 8-seconds, then a 1-second DOWN animation, it would look like this:

    // total duration is 10-seconds
    //  1-second UP is 1/10th of total, or 0.1
    //  8-second PAUSE is 8/10ths of total, or 0.8
    //  1-second DOWN is 1/10th of total, or 0.1
    
    // so the DOWN animation should start at 9-seconds
    //  0.1 + 0.8 = 0.9

    UIView.animateKeyframes(withDuration: 10.0, delay: 0.0, options: [], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.1, animations: {
            self.transform = CGAffineTransform(translationX: 0, y: -50)
        })
        UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1, animations: {
            self.transform = CGAffineTransform(translationX: 0, y: 0)
        })
    }) { (completed) in
        print("done")
    }

Since we generally want to make code flexible, we could write it like this - very, very verbose to make things clear:

func animateUp(){
    
    // we want both UP and DOWN animations to take 0.3 seconds each
    let upAnimDuration: TimeInterval = 0.3
    let downAnimDuration: TimeInterval = 0.3
    
    // we want to pause 3-seconds while view is "up"
    let pauseDuration: TimeInterval = 3.0
    
    // so, total duration is up + pause + down
    let totalDuration: TimeInterval = upAnimDuration + pauseDuration + downAnimDuration
    
    // animateKeyframes uses *relative* times, so
    //  let's convert those to percentages of total
    let upPCT: TimeInterval = upAnimDuration / totalDuration
    let downPCT: TimeInterval = downAnimDuration / totalDuration
    let pausePCT: TimeInterval = pauseDuration / totalDuration
    
    // now let's calculate the start times
    let upStart: TimeInterval = 0.0
    let pauseStart: TimeInterval = upStart + upPCT
    let downStart: TimeInterval = pauseStart + pausePCT

    // let's transform the view UP by self's height + 20-points
    let yOffset: CGFloat = self.frame.height + 20.0
    
    // now we'll do the animation with those values
    UIView.animateKeyframes(withDuration: totalDuration, delay: 0.0, options: [], animations: {
        UIView.addKeyframe(withRelativeStartTime: upStart, relativeDuration: upPCT, animations: {
            self.transform = CGAffineTransform(translationX: 0, y: -yOffset)
        })
        UIView.addKeyframe(withRelativeStartTime: downStart, relativeDuration: downPCT, animations: {
            self.transform = CGAffineTransform(translationX: 0, y: 0)
        })
    }) { (completed) in
        print("done")
    }

}

Can you control GIF animation with Javascript?

You can do it with a single image using CSS sprites.

Why is my SVG animation loop skipping some parts?

Since your animation was complicated. I didn't bother trying to debug it. I just rewrote it in a more simple form.

svg {
  background-color:black
}
.is-hl {
  fill: white;
  stroke: white;
}
.heading-placeholder {
  fill: transparent;
  stroke: white;
}
circle {
  fill: transparent;
  stroke: white;
}

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" class="article-fingerprint d-flex">
  <rect id="overlay" width="100%" height="100%" fill="url(#g1)"></rect>
  <g transform="translate(125, 125)">
    <circle fill="url(#bgGradient)" cx="0" cy="0" r="64.66666666666667"></circle>
    <g class="type-element" idx="0">
      <line x1="3.959691317243109e-15" y1="-64.66666666666667" stroke="#FFFFF0">
        <animate attributeName="x2"
                 dur="6s" repeatCount="indefinite"
                 values="0; 0; 0"
                 keyTimes="0; 0.5; 1"/>
        <animate attributeName="y2"
                 dur="6s" repeatCount="indefinite"
                 values="-90.573; -100.573; -90.573"
                 keyTimes="0; 0.5; 1"/>
      </line>
      <circle r="2.590702292714141">
        <animateTransform attributeName="transform"
                 type="translate"
                 dur="6s" repeatCount="indefinite"
                 values="0,-90.573; 0,-100.573; 0,-90.573"
                 keyTimes="0; 0.5; 1"/>
      </circle>
    </g>
  </g>
</svg>

CSS3 transformations values with jQuery

Maybe use $("#yourelement").position() to get the current position of the element.

It worked for me, once I tried your animation. It also provides negative values if the element offset is out of the screen.

It returns an object with two values, top and left.

Freeze Keyframe Animation for Debugging