Transition

Transition when removing class with display: none

HTML

<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
Click me
</button>

CSS

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
    -webkit-animation: fadeAnimation 3s;
}

.not-updated{
    display: none;
}

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

JavaScript

$('#updater').click(function() {
    $('#box7').removeClass('not-updated');
});