input placeholder transition won't remove text instantly when typing starts

I've got a transition on my text for a color change, so that when I click the input box, the color changes over .5 seconds. The problem is, as soon as I start typing, the same transition overlaps my text, so the placeholder text (in this case: name:) ALSO stays for .5 seconds, so 2 lines of texts are on top of each other for 5. seconds before the placeholder text goes away. Anybody know the issue? 1 of my inputs looks like this

<div class="form-group inner-addon left-addon">
     <label for="name"></label>
     <input type="text" class="form-control custom komigang name" id="name" placeholder="Dit navn" aria-describedby="sizing-addon1" />
                        </div>

and my css for this looks like this 

.komigang::-webkit-input-placeholder {
    color: #747c83;
    transition: .5s;
}
.komigang:focus::-webkit-input-placeholder {
    color: #b7b7b7;
    transition: .5s;
}

I figured I might be able to use a solution from this case: Remove input placeholder using jquery though I am looking for a more specific solution. Thanks guys