====== Nivo Slider PRO ======
**Autor:** Claus Szypura (update) http://phoenixmedia.de //2015/02/10 //  \\

The Camera Slider obviously has some problems displaying moving HTML-snippets via CSS, so here is an example for the Nivo slider

===== Let The Captions Fly =====
It is possible to animate your captions so the can fly in, tumble out or whatever. Just a little CSS and you are done: \\
{{:3rd-party-modules:sliderjs:sliderjs_pro:roll-in.png|}}
plus
<code css>
.divround{
  background:#aaa;
  position:relative;
  left:50%;
  margin-left:-50px;
  width:100px;
  height:100px;
  border-radius:50%;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/*
Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
</code>

===== You can even use some HTML and CSS =====
And then this would be possible also:\\
{{:3rd-party-modules:sliderjs:sliderjs_pro:roll-in2.png|}} \\
You can leave the css-field empty and apply your classes to your moving div container instead!