Change speed during animation CSS3 + Keyframes or transitions

Question

I want to spin a square at a fixed speed, and then, at some point during animation, I want to speed it up. This is my attempt: http://codepen.io/JAStanton/pen/uzfji so far but in Safari it flickers. Other ideas are animating with pure JavaScript, though this has some perf costs on mobile. Thoughts?

Accepted Answer

This can be achieved by chaining 2 animations:

```
-webkit-animation: mymove 4s linear 0s, mymove2 2s linear 4s;
```

The second one will run after 4 seconds of delay so you don't have to listen for events. Additionally you could achieve this effect trough the easing function by using a custom Bezier

Is this what you want: http://jsfiddle.net/jtYCW/

Change speed during animation CSS3 + Keyframes or transitions

Solution

Problem