Animation skipping in Chrome - css

Question

I'm currently working on this site, I've added an animation to this, however the animation seems to skip when hovering in and out. It seems very random, sometimes it will skip to the end of the animation, other times it will skip to the start.
/*** GRID ***/
* {
box-sizing: border-box;
}
.row:after, .row:before {
content: "";
display: block;
overflow: hidden;
}
.row:after {
clear: both;
}
.row>* {
float: left;
}
.col-1-2 {
width: 50%;
}
/*** CODE ***/
.post {
position: relative;
overflow: hidden;
}
.post img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.panel {
display: flex;
align-items: center;
position: absolute;
z-index: 10;
padding: 0 80px;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: rgba(0,200,200,0.5);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.post:hover .panel {
opacity: 0;
}
.post:hover img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="row">
<div class="col-1-2">
<div class="post">
<div class="panel">
<div class="content">
<span>Text</span>
<h1>More Text</h1>
</div>
</div>
<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97550&w=800&h=550" />
</div>
</div>
<div class="col-1-2">
</div>
</div>
I've made a codepen to replicate it.
Hover over the image until the animation has fully stopped.
Hover out and back in again.
Does it cut to the end rather than transition?
Any help is much appreciated (it's driving me insane)

Answer 1

It seems to be a bug with Chrome using opacity. I've swapped to using rgba values instead.