Text change animation CSS only (display none animation) - html

Question

I have been trying to create animation of text appearing/disappearing.
But this is well known problem of animating display property.
I have tried to use opacity and position instead but still no luck.
I don't want to animate this in only one way, I'm just trying to hide one text and show another with arrow animation. But if it is possible to implement this transition in another way, for instance flip, fade or whatever.
Here is my code
HTML
<div class="wrapper">
<nav class="series-navigation">
<div class="series-navigation__container">
<div class="series-navigation__direction series-navigation__direction--previous">
<div class="series-navigation-item series-navigation-item--previous">
<a href="#" class="series-navigation-item__link">
<span class="sop-arrow-left series-navigation-item__icon series-navigation-item__icon--previous"></span>
<span class="series-navigation-item__title series-navigation-item__title--part">Part 1 </span>
<span class="series-navigation-item__title series-navigation-item__title--name">Article name of Part 1</span>
</a>
</div>
</div>
<div class="series-navigation__divider"></div>
<div class="series-navigation__direction series-navigation__direction--next">
<div class="series-navigation-item series-navigation-item--next">
<a href="#" class="series-navigation-item__link">
<span class="series-navigation-item__title series-navigation-item__title--part">Part 3</span>
<span class="series-navigation-item__title series-navigation-item__title--name">Article name of Part 3</span>
<span class="sop-arrow-right series-navigation-item__icon series-navigation-item__icon--next"></span>
</a>
</div>
</div>
</div>
</nav>
</div>
CSS
.sop-arrow-right:before {
content: ">";
}
.sop-arrow-left:before {
content: "<";
}
.wrapper {
margin-top: 1.25em;
overflow: hidden;
font-size: 1.25em;
padding: 1em;
background-color: #fff;
border-radius: 5px;
}
.series-navigation-item__link:hover .series-navigation-item__title--part,
.series-navigation-item__title--name {
visibility: hidden;
opacity: 0;
position: absolute;
}
.series-navigation-item__link:hover .series-navigation-item__title--name,
.series-navigation-item__title--part {
visibility: visible;
opacity: 1;
position: relative;
}
.series-navigation {
text-align: center;
display: block;
width: 100%;
}
.series-navigation__container {
position: relative;
width: 100%;
}
.series-navigation__divider {
position: absolute;
vertical-align: middle;
display: inline-block;
height: 100%;
width: 1px;
background: #52b3d9;
}
.series-navigation__direction {
position: relative;
padding-top: 1.25em;
padding-bottom: 1.25em;
vertical-align: middle;
display: inline-block;
width: 48%;
}
.series-navigation__direction--next {
padding-right: 0.25em;
}
.series-navigation__direction--previous {
padding-left: 0.25em;
}
.series-navigation-item {
display: block;
width: 100%;
}
.series-navigation-item__link {
width: 100%;
}
.series-navigation-item__link:hover .series-navigation-item__icon--next {
margin-right: -0.625em;
margin-left: 0.625em;
}
.series-navigation-item__link:hover .series-navigation-item__icon--previous {
margin-left: -0.625em;
margin-right: 0.625em;
}
.series-navigation-item__title {
font-size: 1em !important;
display: inline-block;
vertical-align: middle;
width: 90%;
}
#media only screen and (max-width: 768px) {
.series-navigation-item__title {
width: 80%;
font-size: 0.875em !important;
}
}
.series-navigation-item__title--part {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.series-navigation-item__title--name {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.series-navigation-item__icon {
width: 10%;
vertical-align: middle;
display: inline-block;
font-size: 1.4375em !important;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.series-navigation-item--previous {
padding-left: 0;
text-align: left;
}
.series-navigation-item--previous .series-navigation-item__title {
padding-right: 0.625em;
}
.series-navigation-item--next {
padding-right: 0;
text-align: right;
}
.series-navigation-item--next .series-navigation-item__title {
padding-left: 0.625em;
}
And live example as well https://jsfiddle.net/CROSP/ebztkwx1/14/
As you can see the animation looks ugly (probably because of position property), furthermore this doesn't work in Safari browser (no animation).
I would be grateful for any help or advice how to achieve desired result.
Thanks.
P.S. no JS & poorly supported browser features.