Fade in image on page load

How would I fade in an image on page load using Angular JS, currently this is my code on AngularJS, but it doesn’t work (based off of: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview)


<object type="image/svg+xml" data="img/logo-blue.svg" class="navbar-logo" ng-class="{'fade-in': vm.fade }"></object>


vm.fade = true;


.animation { opacity:0; transition:all 200ms ease-in-out; }

.animation.fade-in { opacity:1; }

You forget to add animate class on you object tag

<object type=”image/svg+xml” data=”img/logo-blue.svg” class=”animation navbar-logo” ng-class=”{‘fade-in’: vm.fade }”></object>

You need to add the class=”animation” to the object element