Transition on Material icon - css

Question

I am interested in using a transition in the icon on a Material Design card.
Example 1.
Example 2.
Here is what I've got so far: Codepen.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
<div class="card hoverable">
<div class="card-image">
<img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
<h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">arrow_forward</i><i class="material-icons">arrow_forward</i></a>
</div>
<div class="card-content">
<div class="chip teal">
<a class="white-text" href="#!">Tags</a>
</div>
<div class="chip teal">
<a class="white-text" href="#!">Tags 2</a>
</div>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
Problem. If i add both icons and some overflow: hidden; to the container of the icon, the problem is the icons move down. And I upset to set the CSS transition for the icon.

Answer 1

It is possible to recreate the first screen capture as follows.
Ensure that icons within the button are on the same line.
This can be done using white-space: nowrap; on the button.
Transition the left margin of the first icon to move it out of view when the card is being hovered. This will automatically move the second icon into view, as it comes right after.
I demonstrate this below. To not do this automatically for all cards, I have restricted the styles to cards with class two-icons. I have added that class to your HTML, it is otherwise unchanged.
.card {
max-width: 250px; /* only for display purposes on Stack Overflow */
}
.two-icons .btn-floating {
white-space: nowrap;
}
.two-icons .btn-floating .material-icons:first-child {
transition: margin-left .4s;
}
.two-icons:hover .btn-floating .material-icons:first-child {
margin-left: -56px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
<div class="card hoverable two-icons">
<div class="card-image">
<img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
<h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">feedback</i><i class="material-icons">arrow_forward</i></a>
</div>
<div class="card-content">
<div class="chip teal">
<a class="white-text" href="#!">Tags</a>
</div>
<div class="chip teal">
<a class="white-text" href="#!">Tags 2</a>
</div>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>