Knockout-Animate.js is a small collection of knockout.js binding handlers that allows you to quickly enhance your website or web application with subtle CSS3 animations. This library is great for showing/hiding elements in a fancy way.

Animate.css

You can use the Animate.css library with Knockout-Animate to easily bring elements to life. Additional features such as duration and callback have been added to make it more useful in your web apps. You can even create your own CSS3 animations based off of the Animation.css model for endless animation possibilities.

cssAnimate: animation, event: 'click', duration: 1000, callback: null Click Simple 'tada' animation. Click A slow 'wobble' animation Click A fast 'swing' animation Alert is now visible. Hide Me Click Call a function that shows an alert at the end of the animation Hover Animate on hovering over an element Animate when typing text (okay, maybe this one is a bad idea) Animate once your mouse leaves the picture

cssAnimateVisible: { animation: 'bounceIn', animationOut: 'bounceOut', duration: 1000, durationOut: 1000 } Combines the Animate.css library with knockout.js to perform animations whenever the ko bindings visiblity changes.

Default Bounce In, Bounce Out

Show Hide HTML: JS: self.isCssAnimateVisible1 = ko.observable(false);

Slide In Slide Out

Show Hide HTML: JS: self.isCssAnimateVisible2 = ko.observable(false);

Slide in slowly, Slide Out to the right normally

Show Hide HTML: JS: self.isCssAnimateVisible3 = ko.observable(false);

Flipping in and out

Show Hide HTML: JS: self.isCssAnimateVisible4 = ko.observable(false);

Rolling in and Out fast

Show Hide HTML: JS: self.isCssAnimateVisible5 = ko.observable(false);

Light Speed

Show Hide HTML: JS: self.isCssAnimateVisible6 = ko.observable(false);

cssAnimateReveal: { animation: 'bounceIn', duration: 1000, offset: 0, callback: null } Show elements as they come into view. You can set the delay and offset how far on the screen they must appear before becoming visible. Moreover, you can specify a callback function to trigger other javascript related functions.

Bouncing In Bouncing In Bouncing In Bouncing In Bouncing In Bouncing In At Light Speed At Light Speed