Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<div ng-controller="MyCtrl">
<img ng-show="show_logo" ng-animate="{show: 'show'}" src="http://jsfiddle.net/img/logo.png"/>
</div>
CSS
body {
background: #fff;
}
.show-setup {
-webkit-transition: 1s linear all; /* Safari/Chrome */
-moz-transition: 1s linear all; /* Firefox */
-ms-transition: 1s linear all; /* IE10 */
-o-transition: 1s linear all; /* Opera */
transition: 1s linear all; /* Future Browsers */
/* The animation preparation code */
opacity: 0;
}
/*
Keep in mind that you want to combine both CSS
classes together to avoid any CSS-specificity
conflicts
*/
.show-setup.show-start {
/* The animation code itself */
opacity: 1;
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $timeout) {
$scope.show_logo = false;
$timeout(function() {
$scope.$apply('show_logo = true');
}, 2000);
}