Add KenBurns animations

dist/vegas.css

@@ -1,12 +1,8 @@
-.vegas-container {
-    overflow: hidden !important;
-    position: relative;
-}
-
 .vegas-wrapper,
 .vegas-overlay,
 .vegas-timer,
-.vegas-slide {
+.vegas-slide,
+.vegas-slide-inner {
     position: absolute;
     top: 0;
     left: 0;
@@ -31,21 +27,32 @@
         width: 0%;
         height: 100%;
         background: yellowgreen;
-        -webkit-transition-property: width;
-                transition-property: width;
-        -webkit-transition-timing-function: ease-out;
-                transition-timing-function: ease-out;
+        -webkit-transition: width ease-out;
+                transition: width ease-out;
     }
         .vegas-timer-running .vegas-timer-progress {
             width: 100%;
         }
 
-.vegas-slide {
+.vegas-slide,
+.vegas-slide-inner {
     margin: 0;
     padding: 0;
-    background: transparent center center no-repeat;
     -webkit-transform: translateZ(0);
             transform: translateZ(0);
+    background: transparent center center no-repeat;
+}
+
+body .vegas-container {
+    overflow: hidden !important;
+    position: relative;
+}
+    
+.vegas-video {
+    min-width: 100%; 
+    min-height: 100%;
+    width: auto; 
+    height: auto;
 }
 
 body.vegas-container {
@@ -61,18 +68,15 @@ body.vegas-container {
     }
 
     /* Target Safari IOS7+ in order to add 76px */
-    _::-webkit-full-page-media, _:future, 
+    _::full-page-media, _:future, 
     :root body.vegas-container > .vegas-slide,
     :root body.vegas-container > .vegas-overlay {
         bottom: -76px;
     }
-    
-.vegas-video {
-    min-width: 100%; 
-    min-height: 100%;
-    width: auto; 
-    height: auto;
-}
+
+/*************************
+    Transitions
+ *************************/
 
 /* fade */
 .vegas-transition-fade,
@@ -268,3 +272,250 @@ body.vegas-container {
             transform: scale(2) rotate(35deg);
     opacity: 0;
 }
+
+/*************************
+    Animations
+ *************************/
+
+.vegas-animation-kenburns {
+    -webkit-animation: kenburns ease-out;
+            animation: kenburns ease-out;
+}
+@-webkit-keyframes kenburns {
+
+    0% {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+    }
+}
+@keyframes kenburns {
+    0%   {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+    }
+    100% {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+    }
+}
+
+.vegas-animation-kenburnsUp {
+    -webkit-animation: kenburnsUp ease-out;
+            animation: kenburnsUp ease-out;
+}
+@-webkit-keyframes kenburnsUp {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(0, 10%);
+                transform: scale(1.5) translate(0, 10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsUp {
+    0%   {
+        -webkit-transform: scale(1.5) translate(0, 10%);
+                transform: scale(1.5) translate(0, 10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDown {
+    -webkit-animation: kenburnsDown ease-out;
+            animation: kenburnsDown ease-out;
+}
+@-webkit-keyframes kenburnsDown {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(0, -10%);
+                transform: scale(1.5) translate(0, -10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsDown {
+    0%   {
+        -webkit-transform: scale(1.5) translate(0, -10%);
+                transform: scale(1.5) translate(0, -10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsLeft {
+    -webkit-animation: kenburnsLeft ease-out;
+            animation: kenburnsLeft ease-out;
+}
+@-webkit-keyframes kenburnsLeft {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(10%, 0);
+                transform: scale(1.5) translate(10%, 0);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsLeft {
+    0%   {
+        -webkit-transform: scale(1.5) translate(10%, 0);
+                transform: scale(1.5) translate(10%, 0);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsRight {
+    -webkit-animation: kenburnsRight ease-out;
+            animation: kenburnsRight ease-out;
+}
+@-webkit-keyframes kenburnsRight {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(-10%, 0);
+                transform: scale(1.5) translate(-10%, 0);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsRight {
+    0%   {
+        -webkit-transform: scale(1.5) translate(-10%, 0);
+                transform: scale(1.5) translate(-10%, 0);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpLeft {
+    -webkit-animation: kenburnsUpLeft ease-out;
+            animation: kenburnsUpLeft ease-out;
+}
+@-webkit-keyframes kenburnsUpLeft {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(10%, 10%);
+                transform: scale(1.5) translate(10%, 10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsUpLeft {
+    0%   {
+        -webkit-transform: scale(1.5) translate(10%, 10%);
+                transform: scale(1.5) translate(10%, 10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpRight {
+    -webkit-animation: kenburnsUpRight ease-out;
+            animation: kenburnsUpRight ease-out;
+}
+@-webkit-keyframes kenburnsUpRight {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(-10%, 10%);
+                transform: scale(1.5) translate(-10%, 10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsUpRight {
+    0%   {
+        -webkit-transform: scale(1.5) translate(-10%, 10%);
+                transform: scale(1.5) translate(-10%, 10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownLeft {
+    -webkit-animation: kenburnsDownLeft ease-out;
+            animation: kenburnsDownLeft ease-out;
+}
+@-webkit-keyframes kenburnsDownLeft {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(10%, -10%);
+                transform: scale(1.5) translate(10%, -10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsDownLeft {
+    0%   {
+        -webkit-transform: scale(1.5) translate(10%, -10%);
+                transform: scale(1.5) translate(10%, -10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownRight {
+    -webkit-animation: kenburnsDownRight ease-out;
+            animation: kenburnsDownRight ease-out;
+}
+@-webkit-keyframes kenburnsDownRight {
+
+    0% {
+        -webkit-transform: scale(1.5) translate(-10%, -10%);
+                transform: scale(1.5) translate(-10%, -10%);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}
+@keyframes kenburnsDownRight {
+    0%   {
+        -webkit-transform: scale(1.5) translate(-10%, -10%);
+                transform: scale(1.5) translate(-10%, -10%);
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0, 0);
+                transform: scale(1) translate(0, 0);
+    }
+}

dist/vegas.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Vegas - Fullscreen Backgrounds and Slideshows.
- * v2.0.0-wip - built 2015-02-06
+ * v2.0.0-wip - built 2015-02-19
  * Licensed under the MIT License.
  * http://vegas.jaysalvat.com/
  * ----------------------------------------------------------------------------
@@ -14,36 +14,40 @@
     'use strict';
 
     var defaults = {
-        slide:           0,
-        delay:           5000,
-        preload:         false,
-        preloadImage:    false,
-        preloadVideo:    false,
-        timer:           true,
-        overlay:         false,
-        autoplay:        true,
-        shuffle:         false,
-        fill:            true,
-        color:           null,
-        align:           'center',
-        valign:          'center',
-        transition:      'fade',
-        transitionDelay: 1000,
+        slide:              0,
+        delay:              5000,
+        preload:            false,
+        preloadImage:       false,
+        preloadVideo:       false,
+        timer:              true,
+        overlay:            false,
+        autoplay:           true,
+        shuffle:            false,
+        cover:              true,
+        color:              null,
+        align:              'center',
+        valign:             'center',
+        transition:         'fade',
+        transitionDuration: 1000,
+        animation:          null,
+        animationDuration:  'auto',
         init:  function () {},
         play:  function () {},
         pause: function () {},
         walk:  function () {},
         slides: [
             // {   
-            //  src:             null,
-            //  color:           null,
-            //  delay:           null,
-            //  align:           null,
-            //  valign:          null,
-            //  transition:      null,
-            //  transitiondelay: null,
-            //  fill:            true,
-            //  videos:          []
+            //  src:                null,
+            //  color:              null,
+            //  delay:              null,
+            //  align:              null,
+            //  valign:             null,
+            //  transition:         null,
+            //  transitionDuration: null,
+            //  animation:          null,
+            //  animationDuration:  null,
+            //  cover:              true,
+            //  videos:             []
             // }
             // ...
         ]
@@ -64,6 +68,7 @@
         this.$slide       = null;
         this.timeout      = null;
         this.transitions  = [];
+        this.animations   = [];
 
         this.support = {
             objectFit:  'objectFit'  in document.body.style,
@@ -84,11 +89,18 @@
             if (/vegas(\..*?)?(\.min)?\.css$/.test(sheet.href)) {
                 for (var j = 0; j < rules.length; j++) {
                     var rule  = rules[j],
-                        match = /vegas\-transition\-([a-z0-9]*)/gi.exec(rule.selectorText);
+                        matchTransition = /vegas\-transition\-([a-z0-9]*)/gi.exec(rule.selectorText),
+                        matchAnimation  = /vegas\-animation\-([a-z0-9]*)/gi.exec(rule.selectorText);
                 
-                    if (match && match[1]) {
-                        if (this.transitions.indexOf(match[1]) === -1) {
-                            this.transitions.push(match[1]);
+                    if (matchTransition && matchTransition[1]) {
+                        if (this.transitions.indexOf(matchTransition[1]) === -1) {
+                            this.transitions.push(matchTransition[1]);
+                        }
+                    }
+
+                    if (matchAnimation && matchAnimation[1]) {
+                        if (this.animations.indexOf(matchAnimation[1]) === -1) {
+                            this.animations.push(matchAnimation[1]);
                         }
                     }
                 }
@@ -264,34 +276,51 @@
             this.slide = nb;
 
             var $slide,
-                self       = this,
-                $slides    = this.$elmt.children('.vegas-slide'),
-                src        = this.settings.slides[nb].src,
-                videos     = this.settings.slides[nb].video,
-                delay      = this._options('delay'),
-                duration   = this._options('transitionDelay'),
-                align      = this._options('align'),
-                valign     = this._options('valign'),
-                color      = this._options('color') || this.$elmt.css('background-color'),
-                fill       = this._options('fill') ? 'cover' : 'contain',
-                transition = this._options('transition'),
-                total      = $slides.length,
-                isRandom   = transition === 'random',
+                $inner,
+                self    = this,
+                $slides = this.$elmt.children('.vegas-slide'),
+                src     = this.settings.slides[nb].src,
+                videos  = this.settings.slides[nb].video,
+                delay   = this._options('delay'),
+                align   = this._options('align'),
+                valign  = this._options('valign'),
+                color   = this._options('color') || this.$elmt.css('background-color'),
+                cover    = this._options('cover') ? 'cover' : 'contain',
+                total   = $slides.length,
                 video,
                 img;
 
-            if (isRandom) {
+            var transition         = this._options('transition'),
+                transitionDuration = this._options('transitionDuration'),
+                animation          = this._options('animation' ),
+                animationDuration  = this._options('animationDuration');
+
+            if (transition === 'random') {
                 transition = this.transitions[Math.floor(Math.random() * (this.transitions.length - 1))];
             }
 
-            if (transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
                 console.error("Vegas: Transition " + transition + " doesn't exist.");
             }
 
-            if (duration > delay) {
-                duration = delay;
+            if (transitionDuration === 'auto' || transitionDuration > delay) {
+                transitionDuration = delay;
+            }
+
+            if (animation === 'random') {
+                animation = this.animations[Math.floor(Math.random() * (this.animations.length - 1))];
+            }
+
+            if (animation && animation !== 'none' && this.animations.indexOf(animation) < 0) {
+                console.error("Vegas: Animation " + animation + " doesn't exist.");
             }
 
+            if (animationDuration === 'auto' || animationDuration > delay) {
+                animationDuration = delay;
+            }
+
+            console.log(animationDuration);
+
             // Video ?
 
             if (this.support.video && videos) {
@@ -306,10 +335,10 @@
                 if (this.support.objectFit) {
                     $slide
                         .css('object-position', align + ' ' + valign)
-                        .css('object-fit', fill)
+                        .css('object-fit', cover)
                         .css('width',  '100%')
                         .css('height', '100%');
-                } else if (fill === 'contain') {
+                } else if (cover === 'contain') {
                     $slide
                         .css('width',  '100%')
                         .css('height', '100%');
@@ -322,11 +351,22 @@
 
                 $slide = $('<div></div>')
                     .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition)
+                    .addClass('vegas-transition-' + transition);
+
+                $inner = $('<div></div>')
+                    .addClass('vegas-slide-inner')
                     .css('background-image',    'url(' + src + ')')
                     .css('background-color',    color)
                     .css('background-position', align + ' ' + valign)
-                    .css('background-size',     fill);
+                    .css('background-size',     cover);
+
+                if (animation) {
+                    $inner
+                        .addClass('vegas-animation-' + animation)
+                        .css('animation-duration',  animationDuration + 'ms');
+                }
+
+                $slide.append($inner);
             }
 
             if (!self.support.transition) {
@@ -360,16 +400,16 @@
                 setTimeout(function () {
                     if (self.support.transition) {
                         $slides
-                            .css('transition', 'all ' + duration + 'ms')
+                            .css('transition', 'all ' + transitionDuration + 'ms')
                             .addClass('vegas-transition-' + transition + '-out');
                     }
 
                     $slide
-                        .css('transition', 'all ' + duration + 'ms')
+                        .css('transition', 'all ' + transitionDuration + 'ms')
                         .addClass('vegas-transition-' + transition + '-in');
 
                     if (!self.support.transition) {
-                        $slide.fadeIn(duration);
+                        $slide.fadeIn(transitionDuration);
                     }
 
                     for (var i = 0; i < $slides.length - 1; i++) {

gulpfile.js

@@ -183,6 +183,12 @@
             .pipe(gulp.dest('./dist'));
     });
 
+    gulp.task('autoprefixer-src', function () {
+        return gulp.src('./src/**/*.css')
+            .pipe(prefixer())
+            .pipe(gulp.dest('./src'));
+    });
+
     gulp.task('uglify', function () {
         return gulp.src('./dist/**/!(*.min.js).js')
             .pipe(rename({ suffix: '.min' }))

src/vegas.css

@@ -1,7 +1,8 @@
 .vegas-wrapper,
 .vegas-overlay,
 .vegas-timer,
-.vegas-slide {
+.vegas-slide,
+.vegas-slide-inner {
     position: absolute;
     top: 0;
     left: 0;
@@ -26,18 +27,18 @@
         width: 0%;
         height: 100%;
         background: yellowgreen;
-        transition-property: width;
-        transition-timing-function: ease-out;
+        transition: width ease-out;
     }
         .vegas-timer-running .vegas-timer-progress {
             width: 100%;
         }
 
-.vegas-slide {
+.vegas-slide,
+.vegas-slide-inner {
     margin: 0;
     padding: 0;
-    background: transparent center center no-repeat;
     transform: translateZ(0);
+    background: transparent center center no-repeat;
 }
 
 body .vegas-container {
@@ -52,7 +53,6 @@ body .vegas-container {
     height: auto;
 }
 
-
 body.vegas-container {
     overflow: auto;
     position: static;
@@ -66,7 +66,7 @@ body.vegas-container {
     }
 
     /* Target Safari IOS7+ in order to add 76px */
-    _::-webkit-full-page-media, _:future, 
+    _::full-page-media, _:future, 
     :root body.vegas-container > .vegas-slide,
     :root body.vegas-container > .vegas-overlay {
         bottom: -76px;
@@ -222,3 +222,115 @@ body.vegas-container {
     transform: scale(2) rotate(35deg);
     opacity: 0;
 }
+
+/*************************
+    Animations
+ *************************/
+
+.vegas-animation-kenburns {
+    animation: kenburns ease-out;
+}
+@keyframes kenburns {
+    0% {
+        transform: scale(1.5);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.vegas-animation-kenburnsUp {
+    animation: kenburnsUp ease-out;
+}
+@keyframes kenburnsUp {
+    0% {
+        transform: scale(1.5) translate(0, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDown {
+    animation: kenburnsDown ease-out;
+}
+@keyframes kenburnsDown {
+    0% {
+        transform: scale(1.5) translate(0, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsLeft {
+    animation: kenburnsLeft ease-out;
+}
+@keyframes kenburnsLeft {
+    0% {
+        transform: scale(1.5) translate(10%, 0);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsRight {
+    animation: kenburnsRight ease-out;
+}
+@keyframes kenburnsRight {
+    0% {
+        transform: scale(1.5) translate(-10%, 0);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpLeft {
+    animation: kenburnsUpLeft ease-out;
+}
+@keyframes kenburnsUpLeft {
+    0% {
+        transform: scale(1.5) translate(10%, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpRight {
+    animation: kenburnsUpRight ease-out;
+}
+@keyframes kenburnsUpRight {
+    0% {
+        transform: scale(1.5) translate(-10%, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownLeft {
+    animation: kenburnsDownLeft ease-out;
+}
+@keyframes kenburnsDownLeft {
+    0% {
+        transform: scale(1.5) translate(10%, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownRight {
+    animation: kenburnsDownRight ease-out;
+}
+@keyframes kenburnsDownRight {
+    0% {
+        transform: scale(1.5) translate(-10%, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}

src/vegas.js

@@ -5,36 +5,40 @@
     'use strict';
 
     var defaults = {
-        slide:           0,
-        delay:           5000,
-        preload:         false,
-        preloadImage:    false,
-        preloadVideo:    false,
-        timer:           true,
-        overlay:         false,
-        autoplay:        true,
-        shuffle:         false,
-        fill:            true,
-        color:           null,
-        align:           'center',
-        valign:          'center',
-        transition:      'fade',
-        transitionDelay: 1000,
+        slide:              0,
+        delay:              5000,
+        preload:            false,
+        preloadImage:       false,
+        preloadVideo:       false,
+        timer:              true,
+        overlay:            false,
+        autoplay:           true,
+        shuffle:            false,
+        cover:              true,
+        color:              null,
+        align:              'center',
+        valign:             'center',
+        transition:         'fade',
+        transitionDuration: 1000,
+        animation:          null,
+        animationDuration:  'auto',
         init:  function () {},
         play:  function () {},
         pause: function () {},
         walk:  function () {},
         slides: [
             // {   
-            //  src:             null,
-            //  color:           null,
-            //  delay:           null,
-            //  align:           null,
-            //  valign:          null,
-            //  transition:      null,
-            //  transitiondelay: null,
-            //  fill:            true,
-            //  videos:          []
+            //  src:                null,
+            //  color:              null,
+            //  delay:              null,
+            //  align:              null,
+            //  valign:             null,
+            //  transition:         null,
+            //  transitionDuration: null,
+            //  animation:          null,
+            //  animationDuration:  null,
+            //  cover:              true,
+            //  videos:             []
             // }
             // ...
         ]
@@ -55,6 +59,7 @@
         this.$slide       = null;
         this.timeout      = null;
         this.transitions  = [];
+        this.animations   = [];
 
         this.support = {
             objectFit:  'objectFit'  in document.body.style,
@@ -75,11 +80,18 @@
             if (/vegas(\..*?)?(\.min)?\.css$/.test(sheet.href)) {
                 for (var j = 0; j < rules.length; j++) {
                     var rule  = rules[j],
-                        match = /vegas\-transition\-([a-z0-9]*)/gi.exec(rule.selectorText);
+                        matchTransition = /vegas\-transition\-([a-z0-9]*)/gi.exec(rule.selectorText),
+                        matchAnimation  = /vegas\-animation\-([a-z0-9]*)/gi.exec(rule.selectorText);
                 
-                    if (match && match[1]) {
-                        if (this.transitions.indexOf(match[1]) === -1) {
-                            this.transitions.push(match[1]);
+                    if (matchTransition && matchTransition[1]) {
+                        if (this.transitions.indexOf(matchTransition[1]) === -1) {
+                            this.transitions.push(matchTransition[1]);
+                        }
+                    }
+
+                    if (matchAnimation && matchAnimation[1]) {
+                        if (this.animations.indexOf(matchAnimation[1]) === -1) {
+                            this.animations.push(matchAnimation[1]);
                         }
                     }
                 }
@@ -255,34 +267,51 @@
             this.slide = nb;
 
             var $slide,
-                self       = this,
-                $slides    = this.$elmt.children('.vegas-slide'),
-                src        = this.settings.slides[nb].src,
-                videos     = this.settings.slides[nb].video,
-                delay      = this._options('delay'),
-                duration   = this._options('transitionDelay'),
-                align      = this._options('align'),
-                valign     = this._options('valign'),
-                color      = this._options('color') || this.$elmt.css('background-color'),
-                fill       = this._options('fill') ? 'cover' : 'contain',
-                transition = this._options('transition'),
-                total      = $slides.length,
-                isRandom   = transition === 'random',
+                $inner,
+                self    = this,
+                $slides = this.$elmt.children('.vegas-slide'),
+                src     = this.settings.slides[nb].src,
+                videos  = this.settings.slides[nb].video,
+                delay   = this._options('delay'),
+                align   = this._options('align'),
+                valign  = this._options('valign'),
+                color   = this._options('color') || this.$elmt.css('background-color'),
+                cover    = this._options('cover') ? 'cover' : 'contain',
+                total   = $slides.length,
                 video,
                 img;
 
-            if (isRandom) {
+            var transition         = this._options('transition'),
+                transitionDuration = this._options('transitionDuration'),
+                animation          = this._options('animation' ),
+                animationDuration  = this._options('animationDuration');
+
+            if (transition === 'random') {
                 transition = this.transitions[Math.floor(Math.random() * (this.transitions.length - 1))];
             }
 
-            if (transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
                 console.error("Vegas: Transition " + transition + " doesn't exist.");
             }
 
-            if (duration > delay) {
-                duration = delay;
+            if (transitionDuration === 'auto' || transitionDuration > delay) {
+                transitionDuration = delay;
+            }
+
+            if (animation === 'random') {
+                animation = this.animations[Math.floor(Math.random() * (this.animations.length - 1))];
+            }
+
+            if (animation && animation !== 'none' && this.animations.indexOf(animation) < 0) {
+                console.error("Vegas: Animation " + animation + " doesn't exist.");
             }
 
+            if (animationDuration === 'auto' || animationDuration > delay) {
+                animationDuration = delay;
+            }
+
+            console.log(animationDuration);
+
             // Video ?
 
             if (this.support.video && videos) {
@@ -297,10 +326,10 @@
                 if (this.support.objectFit) {
                     $slide
                         .css('object-position', align + ' ' + valign)
-                        .css('object-fit', fill)
+                        .css('object-fit', cover)
                         .css('width',  '100%')
                         .css('height', '100%');
-                } else if (fill === 'contain') {
+                } else if (cover === 'contain') {
                     $slide
                         .css('width',  '100%')
                         .css('height', '100%');
@@ -313,11 +342,22 @@
 
                 $slide = $('<div></div>')
                     .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition)
+                    .addClass('vegas-transition-' + transition);
+
+                $inner = $('<div></div>')
+                    .addClass('vegas-slide-inner')
                     .css('background-image',    'url(' + src + ')')
                     .css('background-color',    color)
                     .css('background-position', align + ' ' + valign)
-                    .css('background-size',     fill);
+                    .css('background-size',     cover);
+
+                if (animation) {
+                    $inner
+                        .addClass('vegas-animation-' + animation)
+                        .css('animation-duration',  animationDuration + 'ms');
+                }
+
+                $slide.append($inner);
             }
 
             if (!self.support.transition) {
@@ -351,16 +391,16 @@
                 setTimeout(function () {
                     if (self.support.transition) {
                         $slides
-                            .css('transition', 'all ' + duration + 'ms')
+                            .css('transition', 'all ' + transitionDuration + 'ms')
                             .addClass('vegas-transition-' + transition + '-out');
                     }
 
                     $slide
-                        .css('transition', 'all ' + duration + 'ms')
+                        .css('transition', 'all ' + transitionDuration + 'ms')
                         .addClass('vegas-transition-' + transition + '-in');
 
                     if (!self.support.transition) {
-                        $slide.fadeIn(duration);
+                        $slide.fadeIn(transitionDuration);
                     }
 
                     for (var i = 0; i < $slides.length - 1; i++) {