Element Transitions

Element transitions are simple transitions made for small components. Each transition manipulates a simple property which you can combine together. Try adding these transitions to cards, small blocks of text, our device components and more.

Make sure if you are using a transform transition (Scale and Rotates), add a parent wrapper to ensure the right CSS3 perspective styles.

Type	Description
fade	Transition opacity from 1 to 0.
scale	Transition scale from 1 to 0.
up	Transition element from down to up.
right	Transition element from left to right.
down	Transition element from up to down.
left	Transition element from up to down.
rotate-y	Transition rotation along the y axis.
rotate-x	Transition rotation along the x axis.


  <!-- Normal Transitions -->
  <div class="fade-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="up-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="right-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="down-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="left-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <!-- Transform Transitions -->
  <div class="transform-wrapper">
    <div class="scale-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
  </div>

  <div class="transform-wrapper">
    <div class="rotate-y-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
  </div>

  <div class="transform-wrapper">
    <div class="rotate-x-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
  </div>

Type	Description
in-out	This means the element starts in the out state and tweens to the in state.
out-in	This means the element starts in the in state and tweens to the out state.
in	This means the element starts in the in state and tweens to the out state, but only once. After the scroll is fully triggered, the element will stay in the out state.
out	This means the element starts in the out state and tweens to the in state, but only once. After the scroll is fully triggered, the element will stay in the in state.


  <div class="fade-in-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="fade-out-in">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="fade-in">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

  <div class="fade-out">
    <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
  </div>

You can chain together element transitions and stagger their animations. Just wrap the transitions you want to be staggered in a

This is a cool feature about your product! It really separates you from the crowd.
This is a cool feature about your product! It really separates you from the crowd.
This is a cool feature about your product! It really separates you from the crowd.
This is a cool feature about your product! It really separates you from the crowd.
This is a cool feature about your product! It really separates you from the crowd.
This is a cool feature about your product! It really separates you from the crowd.


  <div class="row staggered-transition-wrapper" data-duration="0" data-staggereddelay=".9">
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4 fade-in-out">
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
  </div>

Transition Properties

Transition Types

Staggered Transitions