Get percent value of animation

Question

Let's say I have following:

CSS

.animatedItem {
    background-color: red;
    width: 200px;
    height: 200px;
    transition: all 1200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.animatedItemSate1 {
    margin-left: 0px;
}
.animatedItemState2 {
    margin-left: 200px;
}

JQuery

$('.animatedItem.animatedItemSate1')
     .removeClass('animatedItemSate1')
     .addClass('animatedItemState2');

// get X percent of animation
var percent = 30; // 30% of animation
var animationValue = '?'; // animation value at 30%
alert(animationValue);

HTML

<div class="animatedItem animatedItemSate1"><div>

$('.animatedItem.animatedItemSate1')
  .removeClass('animatedItemSate1')
  .addClass('animatedItemState2');

// get X percent of animation
var percent = 30; // 30% of animation
var animationValue = '?'; // animation value at 30%
console.log(animationValue);

.animatedItem {
  background-color: red;
  width: 200px;
  height: 200px;
  transition: all 1200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.animatedItemSate1 {
  margin-left: 0px;
}

.animatedItemState2 {
  margin-left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedItem animatedItemSate1">
  <div>

It runs not linear css3 animation. I need to get animation value of 30%(or any other) before animation runs. How to get that? I've created a fiddle: https://jsfiddle.net/syom777/xnpfzyoL/8/

Update: There is similar discussion here: CSS3 animation "progress" callback

I think we can apply another way to get it, because in cubic-bezier(0.39, 0.575, 0.565, 1) line we have the algorithm of animation, so there should be a way to get any value from there.

Thanks.