cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="background-2">
  <section class="quotes-carousel-container">
    <section class="quotes-carousel fade-up" id="quotes-carousel">
      <div class="quote previous">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/liz_myers.png);" alt="Liz Myers"></div>
        <div class="quote-text-container">
          <span class="quote-text">I'm really enjoying the #cssAnimation101 class with <a href="https://twitter.com/donovanh">@donovanh</a>. Couldn't recommend it more highly. Just right in every way!</span>
          <span class="quotee"><a href="https://twitter.com/LizMyers/status/585907961601601536">Liz Myers</a></span>
        </div>
      </div>
      <div class="quote current">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/maile_valentine.jpg);" alt="Maile Valentine"></div>
        <div class="quote-text-container">
          <span class="quote-text">I loved that this course provided context for the samples provided in the lessons. I learned new concepts, as well as where and when to apply the techniques.</span>
          <span class="quotee"><a href="https://twitter.com/mailevalentine">Maile Valentine</a></span>
        </div>
      </div>
      <div class="quote next">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/marie_mosley.jpg);" alt="Marie Mosley"></div>
        <div class="quote-text-container">
          <span class="quote-text">I had so much fun with this course! I loved the interactive demos, they helped me use what I learned right away and got me thinking creatively about all the cool things I can do with animation.</span>
          <span class="quotee"><a href="https://twitter.com/mmosley">Marie Mosley</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/ian_yates.jpg);" alt="Ian Yates"></div>
        <div class="quote-text-container">
          <span class="quote-text">CSS Animation 101 is the perfect example of a well structured, well paced and entertaining course. After just the first few lessons you’ll find that CSS animation has become an every day part of your web design!</span>
          <span class="quotee"><a href="http://www.snaptin.com">Ian Yates</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/brian_rinaldi.jpg);" alt="Brian Rinaldi"></div>
        <div class="quote-text-container">
          <span class="quote-text">This course was very accessible to anyone, regardless of their experience level. I found it easy to follow along and learn.</span>
          <span class="quotee"><a href="https://twitter.com/remotesynth">Brian Rinaldi</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/ronan_costello.jpg);" alt="Ronan Costello"></div>
        <div class="quote-text-container">
          <span class="quote-text">Can't recommend this enough. Brilliant lessons, convenient format and great value for money. It's a must!</span>
          <span class="quotee"><a href="http://ronancostello.com/">Ronan Costello</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/gemma_cagney.jpg);" alt="Ronan Costello"></div>
        <div class="quote-text-container">
          <span class="quote-text">I wanted to learn how to use CSS animation in my own work but I had no
    idea where to start. Donovan's course is like a filter for all the
    important and useful information, as well as best practice tips. Totally
    recommend it!</span>
          <span class="quotee"><a href="http://www.gemmacagney.com">Gemma Cagney</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/dave_larkan.jpg);" alt="Dave Larkan"></div>
        <div class="quote-text-container">
          <span class="quote-text">A fantastic resource, I was able to put what I learned into practice straight away. The course did exactly what I hoped it would and taught me about transitions and animations.</span>
          <span class="quotee"><a href="https://twitter.com/davelarkan">Dave Larkan</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/melanie_kinney.jpg);" alt="Melanie Kinney"></div>
        <div class="quote-text-container">
          <span class="quote-text">I loved it! It was great that I could do things at my own pace, it's really nice to have all the emails to go back and review.</span>
          <span class="quotee"><a href="https://twitter.com/melso0">Melanie Kinney</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/zoran_jambor.jpg);" alt="Zoran Jambor"></div>
        <div class="quote-text-container">
          <span class="quote-text">If you want to get better at CSS Animations, you should sign up for this course. It will take you from basic to advanced concepts explaining the inner workings of CSS Animations. It is both useful and fun.</span>
          <span class="quotee"><a href="http://css-weekly.com/">Zoran Jambor</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/brian_kenny.png);" alt="Brian Kenny"></div>
        <div class="quote-text-container">
          <span class="quote-text">CSS Animation 101 was superb. I learn by doing and this course hit the nail on the head. Exceptional.</span>
          <span class="quotee"><a href="http://www.minicorp.co">Brian Kenny</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/jake_bresnehan.jpg);" alt="Jake Bresnehan"></div>
        <div class="quote-text-container">
          <span class="quote-text">20 amazing emails over 4 weeks all on CSS animations will turn you into a pro in no time. Couldn't recommend it enough.</span>
          <span class="quotee"><a href="https://web-design-weekly.com">Jake Bresnehan</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/michael_flanaghan.png);" alt="Michael Flanaghan"></div>
        <div class="quote-text-container">
          <span class="quote-text">This is a well written, well presented, introduction to some of the newer and cooler features of modern CSS. Loved it.</span>
          <span class="quotee"><a href="http://michael.flanagan.ie/">Michael Flanaghan</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/ioana_manoliu.jpg);" alt="Ioana Manoliu"></div>
        <div class="quote-text-container">
          <span class="quote-text">@donovanh's CSS animation course kicks ass!!!!</span>
          <span class="quotee"><a href="https://twitter.com/Alice_monique1/status/585090068022489088">Ioana Manoliu</a></span>
        </div>
      </div>
      <div class="quote">
        <div class="quote-person" style="background-image: url(https://cssanimation.rocks/images/quotes/ben.jpg);" alt="Ben Gandhi-Shepard"></div>
        <div class="quote-text-container">
          <span class="quote-text">This course rocks. Transitions and animations totally make sense now. If you are looking to level up your CSS animation skills, I would highly recommend taking this course.</span>
          <span class="quotee"><a href="https://twitter.com/gandhishepard">Ben Gandhi-Shepard</a></span>
        </div>
      </div>
    </section>
  </section>
</section>
            
          
!
            
              // General page styles
body {
  font-family: Helvetica,  Arial, Sans-serif;
  color: #333;
  margin: 0;
  line-height: 2;
  overflow: hidden;
}

a {
  color: #ff4d00;
  text-decoration: none;
}

// Styles specific to the course level-up page
$box-shadow: 0 2px 4px 0 rgba(31,0,33,0.50);
$animation-duration: 5s;
$highlight-color: #38b449;

$bezier-snappy: cubic-bezier(0,.86,.3,1);
$bezier-bouncy: cubic-bezier(1,-0.74,0,1.48);
$bezier-sharp: cubic-bezier(.21,.91,.39,.99);
$bezier-luxurious: cubic-bezier(.77,0,.35,1);

.background-2 {
  min-height: 30em;
  background-image: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,1) 100%),
                    linear-gradient(157deg, #FFD17C 20%, #E77FE9 96%);
  background-size: 100% 100%;
}

.quotes-carousel-container {
  max-width: 62rem;
  height: 28em;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.quotes-carousel {
  position: relative;
  min-height: 22em;
  width: 100%;
  
  .quote-person {
    background-size: 100%;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(31, 0, 33, 0.5);
    height: 7em;
    left: calc(50% - 3.5em);
    position: absolute;
    top: -7em;
    width: 7em;
    transition: all .4s .5s ease-out;
  }

  .quotee {
    display: block;
  }

  .quote {
    cursor: pointer;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(calc(100% + 12rem), -50%) scale(.6);
    transition: transform 1s $bezier-luxurious, opacity .5s ease-out;
    display: block;
    margin: 8em auto 4em;
    max-width: 18em;
    min-width: 12em;
    padding: 1em;

    &.previous {
      transform: translate(-150%, -50%) scale(.8);
      opacity: .5;
      transition: transform 1s $bezier-luxurious, opacity 1s .4s ease-out;
      @media only screen and (max-width: 520px) {
        transform: translate(-140%, -50%) scale(.8);
        .quote-person {
          transform: translateX(1rem);
        }
      }
    }

    &.current {
      transform: translate(-50%, -50%);
      opacity: 1;
      height: auto;
    }

    &.next {
      transform: translate(50%, -50%) scale(.8);
      opacity: .5;
      transition: transform 1s $bezier-luxurious, opacity 1s .6s ease-out;
      @media only screen and (max-width: 520px) {
        transform: translate(40%, -50%) scale(.8);
        .quote-person {
          transform: translateX(-1rem);
        }
      }
    }

    &.remove-left {
      transform: translate(calc(-150% - 12rem), -50%) scale(.8);
    }

    &.place-left {
      transform: translate(calc(-150% - 12rem), -50%) scale(.6);
      transition: none;
    }
  }
}
            
          
!
            
              $(function() {
  // Carousel logic
  $('#quotes-carousel').on('click', '.next', showNextQuoteClick);
  $('#quotes-carousel').on('click', '.previous', showPreviousQuoteClick);
  // Cycle automatically
  window.carouselRunning = true;
  window.restartingCarousel = null;
  var interval = setInterval(function() {
    if (window.carouselRunning) {
      showNextQuote();
    }
  }, 4000);
});

/* Carousel stuff */
function showNextQuoteClick() {
  window.carouselRunning = false;
  clearTimeout(window.restartingCarousel);
  showNextQuote();
  restartAutomatic();
}

function showPreviousQuoteClick() {
  window.carouselRunning = false;
  clearTimeout(window.restartingCarousel);
  showPreviousQuote();
  restartAutomatic();
}

function restartAutomatic() {
  clearTimeout(window.restartingCarousel);
  window.restartingCarousel = setTimeout(function() {
    window.carouselRunning = true;
  }, 10000);
}

function showNextQuote() {
  var allQuotes = $('#quotes-carousel').find('.quote'),
      current = $('#quotes-carousel').find('.current'),
      previous = $('#quotes-carousel').find('.previous'),
      next = $('#quotes-carousel').find('.next');
  $(current).removeClass('current').addClass('previous');
  $(next).removeClass('next').addClass('current');
  $(previous).removeClass('previous').addClass('remove-left');
  setTimeout(function() {
    $(previous).removeClass('remove-left');
  }, 1000);
  // Work out what should now be the "next" item
  $(allQuotes).each(function(index, item) {
    if ($(item).hasClass('current')) {
      if (allQuotes[index + 1]) {
        $(allQuotes[index + 1]).addClass('next').removeClass('remove-left');
      } else {
        $(allQuotes[0]).addClass('next').removeClass('remove-left');
      }
    }
  });
}

function showPreviousQuote() {
  var allQuotes = $('#quotes-carousel').find('.quote'),
      current = $('#quotes-carousel').find('.current'),
      previous = $('#quotes-carousel').find('.previous'),
      next = $('#quotes-carousel').find('.next');
  $(current).removeClass('current').addClass('next');
  $(previous).removeClass('previous').addClass('current');
  $(next).removeClass('next');
  // Work out what should now be the "next" item
  $(allQuotes).each(function(index, item) {
    if ($(item).hasClass('current')) {
      if (allQuotes[index - 1]) {
        $(allQuotes[index - 1]).addClass('place-left');
        setTimeout(function() {
          $(allQuotes[index - 1]).addClass('previous').removeClass('place-left');
        }, 10);
      } else {
        $(allQuotes[allQuotes.length - 1]).addClass('place-left');
        setTimeout(function() {
          $(allQuotes[allQuotes.length - 1]).addClass('previous').removeClass('place-left');
        }, 10);
      }
    }
  });
}


            
          
!
999px
Loading ..................

Console