Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="cd-intro">
    	<h1 class="cd-headline clip is-full-width">
			<span>We Design & Develop Websites in</span>
			<span class="cd-words-wrapper">
				<b class="is-visible"><img src="https://i.imgur.com/h7tFlwr.png" style="vertical-align:middle;">Squarespace</b>
				<b><img src="https://i.imgur.com/U4ubCte.png" style="vertical-align:middle;">Shopify</b>
				<b><img src="https://i.imgur.com/ge59aPV.png" style="vertical-align:middle;">Wix</b>
			</span>
		</h1>

</section>
              
            
!

CSS

              
                 *, *::after, *::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 html * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 html {
     font-size: 62.5%;
 }
 body {
     font-size: 1.6rem;
     font-family:"Source Sans Pro", sans-serif;
     color: #aebcb9;
     background-color: #0d0d0d;
 }
 a {
     text-decoration: none;
 }
 .cd-title {
     position: relative;
     height: 160px;
     line-height: 230px;
     text-align: center;
 }
 .cd-title h1 {
     font-size: 2.4rem;
     font-weight: 700;
 }
 @media only screen and (min-width: 768px) {
     .cd-title {
         line-height: 250px;
     }
 }
 @media only screen and (min-width: 1170px) {
     .cd-title {
         height: 200px;
         line-height: 300px;
     }
     .cd-title h1 {
         font-size: 3rem;
     }
 }
 .cd-intro {
     width: 90%;
     max-width: 768px;
     text-align: center;
 }
 .cd-intro {
     margin: 4em auto;
 }
 @media only screen and (min-width: 768px) {
     .cd-intro {
         margin: 5em auto;
     }
 }
 @media only screen and (min-width: 1170px) {
     .cd-intro {
         margin: 6em auto;
     }
 }
 .cd-headline {
     font-size: 3rem;
     line-height: 1.2;
 }
 @media only screen and (min-width: 768px) {
     .cd-headline {
         font-size: 4.4rem;
         font-weight: 300;
     }
 }
 @media only screen and (min-width: 1170px) {
     .cd-headline {
         font-size: 6rem;
     }
 }
 .cd-words-wrapper {
     display: inline-block;
     position: relative;
     text-align: left;
 }
 .cd-words-wrapper b {
     display: inline-block;
     position: absolute;
     white-space: nowrap;
     left: 0;
     top: 0;
 }
 .cd-words-wrapper b.is-visible {
     position: relative;
 }
 .no-js .cd-words-wrapper b {
     opacity: 0;
 }
 .no-js .cd-words-wrapper b.is-visible {
     opacity: 1;
 }
 /* -------------------------------- 

xrotate-1 

-------------------------------- */
 .cd-headline.rotate-1 .cd-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }
 .cd-headline.rotate-1 b {
     opacity: 0;
     -webkit-transform-origin: 50% 100%;
     -moz-transform-origin: 50% 100%;
     -ms-transform-origin: 50% 100%;
     -o-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
 }
 .cd-headline.rotate-1 b.is-visible {
     opacity: 1;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-animation: cd-rotate-1-in 1.2s;
     -moz-animation: cd-rotate-1-in 1.2s;
     animation: cd-rotate-1-in 1.2s;
 }
 .cd-headline.rotate-1 b.is-hidden {
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
     -webkit-animation: cd-rotate-1-out 1.2s;
     -moz-animation: cd-rotate-1-out 1.2s;
     animation: cd-rotate-1-out 1.2s;
 }
 @-webkit-keyframes cd-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -webkit-transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @-moz-keyframes cd-rotate-1-in {
     0% {
         -moz-transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -moz-transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -moz-transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @keyframes cd-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -webkit-transform: rotateX(120deg);
         -moz-transform: rotateX(120deg);
         -ms-transform: rotateX(120deg);
         -o-transform: rotateX(120deg);
         transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(360deg);
         -moz-transform: rotateX(360deg);
         -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
         transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @-webkit-keyframes cd-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -webkit-transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(180deg);
         opacity: 0;
     }
 }
 @-moz-keyframes cd-rotate-1-out {
     0% {
         -moz-transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -moz-transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -moz-transform: rotateX(180deg);
         opacity: 0;
     }
 }
 @keyframes cd-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0deg);
         -moz-transform: rotateX(0deg);
         -ms-transform: rotateX(0deg);
         -o-transform: rotateX(0deg);
         transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -webkit-transform: rotateX(-40deg);
         -moz-transform: rotateX(-40deg);
         -ms-transform: rotateX(-40deg);
         -o-transform: rotateX(-40deg);
         transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0;
     }
 }
 /* -------------------------------- 

xtype 

-------------------------------- */
 .cd-headline.type .cd-words-wrapper {
     vertical-align: top;
     overflow: hidden;
 }
 .cd-headline.type .cd-words-wrapper::after {
     /* vertical bar */
     content:'';
     position: absolute;
     right: 0;
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
     height: 90%;
     width: 1px;
     background-color: #aebcb9;
 }
 .cd-headline.type .cd-words-wrapper.waiting::after {
     -webkit-animation: cd-pulse 1s infinite;
     -moz-animation: cd-pulse 1s infinite;
     animation: cd-pulse 1s infinite;
 }
 .cd-headline.type .cd-words-wrapper.selected {
     background-color: #aebcb9;
 }
 .cd-headline.type .cd-words-wrapper.selected::after {
     visibility: hidden;
 }
 .cd-headline.type .cd-words-wrapper.selected b {
     color: #0d0d0d;
 }
 .cd-headline.type b {
     visibility: hidden;
 }
 .cd-headline.type b.is-visible {
     visibility: visible;
 }
 .cd-headline.type i {
     position: absolute;
     visibility: hidden;
 }
 .cd-headline.type i.in {
     position: relative;
     visibility: visible;
 }
 @-webkit-keyframes cd-pulse {
     0% {
         -webkit-transform: translateY(-50%) scale(1);
         opacity: 1;
     }
     40% {
         -webkit-transform: translateY(-50%) scale(0.9);
         opacity: 0;
     }
     100% {
         -webkit-transform: translateY(-50%) scale(0);
         opacity: 0;
     }
 }
 @-moz-keyframes cd-pulse {
     0% {
         -moz-transform: translateY(-50%) scale(1);
         opacity: 1;
     }
     40% {
         -moz-transform: translateY(-50%) scale(0.9);
         opacity: 0;
     }
     100% {
         -moz-transform: translateY(-50%) scale(0);
         opacity: 0;
     }
 }
 @keyframes cd-pulse {
     0% {
         -webkit-transform: translateY(-50%) scale(1);
         -moz-transform: translateY(-50%) scale(1);
         -ms-transform: translateY(-50%) scale(1);
         -o-transform: translateY(-50%) scale(1);
         transform: translateY(-50%) scale(1);
         opacity: 1;
     }
     40% {
         -webkit-transform: translateY(-50%) scale(0.9);
         -moz-transform: translateY(-50%) scale(0.9);
         -ms-transform: translateY(-50%) scale(0.9);
         -o-transform: translateY(-50%) scale(0.9);
         transform: translateY(-50%) scale(0.9);
         opacity: 0;
     }
     100% {
         -webkit-transform: translateY(-50%) scale(0);
         -moz-transform: translateY(-50%) scale(0);
         -ms-transform: translateY(-50%) scale(0);
         -o-transform: translateY(-50%) scale(0);
         transform: translateY(-50%) scale(0);
         opacity: 0;
     }
 }
 /* -------------------------------- 

xrotate-2 

-------------------------------- */
 .cd-headline.rotate-2 .cd-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }
 .cd-headline.rotate-2 i, .cd-headline.rotate-2 em {
     display: inline-block;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
 }
 .cd-headline.rotate-2 i {
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-transform: translateZ(-20px) rotateX(90deg);
     -moz-transform: translateZ(-20px) rotateX(90deg);
     -ms-transform: translateZ(-20px) rotateX(90deg);
     -o-transform: translateZ(-20px) rotateX(90deg);
     transform: translateZ(-20px) rotateX(90deg);
     opacity: 0;
 }
 .is-visible .cd-headline.rotate-2 i {
     opacity: 1;
 }
 .cd-headline.rotate-2 i.in {
     -webkit-animation: cd-rotate-2-in 0.4s forwards;
     -moz-animation: cd-rotate-2-in 0.4s forwards;
     animation: cd-rotate-2-in 0.4s forwards;
 }
 .cd-headline.rotate-2 i.out {
     -webkit-animation: cd-rotate-2-out 0.4s forwards;
     -moz-animation: cd-rotate-2-out 0.4s forwards;
     animation: cd-rotate-2-out 0.4s forwards;
 }
 .cd-headline.rotate-2 em {
     -webkit-transform: translateZ(20px);
     -moz-transform: translateZ(20px);
     -ms-transform: translateZ(20px);
     -o-transform: translateZ(20px);
     transform: translateZ(20px);
 }
 .no-csstransitions .cd-headline.rotate-2 i {
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     transform: rotateX(0deg);
     opacity: 0;
 }
 .no-csstransitions .cd-headline.rotate-2 i em {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
 }
 .no-csstransitions .cd-headline.rotate-2 .is-visible i {
     opacity: 1;
 }
 @-webkit-keyframes cd-rotate-2-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(90deg);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(-10deg);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0deg);
     }
 }
 @-moz-keyframes cd-rotate-2-in {
     0% {
         opacity: 0;
         -moz-transform: translateZ(-20px) rotateX(90deg);
     }
     60% {
         opacity: 1;
         -moz-transform: translateZ(-20px) rotateX(-10deg);
     }
     100% {
         opacity: 1;
         -moz-transform: translateZ(-20px) rotateX(0deg);
     }
 }
 @keyframes cd-rotate-2-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(90deg);
         -moz-transform: translateZ(-20px) rotateX(90deg);
         -ms-transform: translateZ(-20px) rotateX(90deg);
         -o-transform: translateZ(-20px) rotateX(90deg);
         transform: translateZ(-20px) rotateX(90deg);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(-10deg);
         -moz-transform: translateZ(-20px) rotateX(-10deg);
         -ms-transform: translateZ(-20px) rotateX(-10deg);
         -o-transform: translateZ(-20px) rotateX(-10deg);
         transform: translateZ(-20px) rotateX(-10deg);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0deg);
         -moz-transform: translateZ(-20px) rotateX(0deg);
         -ms-transform: translateZ(-20px) rotateX(0deg);
         -o-transform: translateZ(-20px) rotateX(0deg);
         transform: translateZ(-20px) rotateX(0deg);
     }
 }
 @-webkit-keyframes cd-rotate-2-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-100deg);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-90deg);
     }
 }
 @-moz-keyframes cd-rotate-2-out {
     0% {
         opacity: 1;
         -moz-transform: translateZ(-20px) rotateX(0);
     }
     60% {
         opacity: 0;
         -moz-transform: translateZ(-20px) rotateX(-100deg);
     }
     100% {
         opacity: 0;
         -moz-transform: translateZ(-20px) rotateX(-90deg);
     }
 }
 @keyframes cd-rotate-2-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0);
         -moz-transform: translateZ(-20px) rotateX(0);
         -ms-transform: translateZ(-20px) rotateX(0);
         -o-transform: translateZ(-20px) rotateX(0);
         transform: translateZ(-20px) rotateX(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-100deg);
         -moz-transform: translateZ(-20px) rotateX(-100deg);
         -ms-transform: translateZ(-20px) rotateX(-100deg);
         -o-transform: translateZ(-20px) rotateX(-100deg);
         transform: translateZ(-20px) rotateX(-100deg);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-90deg);
         -moz-transform: translateZ(-20px) rotateX(-90deg);
         -ms-transform: translateZ(-20px) rotateX(-90deg);
         -o-transform: translateZ(-20px) rotateX(-90deg);
         transform: translateZ(-20px) rotateX(-90deg);
     }
 }
 /* -------------------------------- 

xloading-bar 

-------------------------------- */
 .cd-headline.loading-bar span {
     display: inline-block;
     padding: .2em 0;
 }
 .cd-headline.loading-bar .cd-words-wrapper {
     overflow: hidden;
     vertical-align: top;
 }
 .cd-headline.loading-bar .cd-words-wrapper::after {
     /* loading bar */
     content:'';
     position: absolute;
     left: 0;
     bottom: 0;
     height: 3px;
     width: 0;
     background: #0096a7;
     z-index: 2;
     -webkit-transition: width 0.3s -0.1s;
     -moz-transition: width 0.3s -0.1s;
     transition: width 0.3s -0.1s;
 }
 .cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
     width: 100%;
     -webkit-transition: width 3s;
     -moz-transition: width 3s;
     transition: width 3s;
 }
 .cd-headline.loading-bar b {
     top: .2em;
     opacity: 0;
     -webkit-transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
     transition: opacity 0.3s;
 }
 .cd-headline.loading-bar b.is-visible {
     opacity: 1;
     top: 0;
 }
 /* -------------------------------- 

xslide 

-------------------------------- */
 .cd-headline.slide span {
     display: inline-block;
     padding: .2em 0;
 }
 .cd-headline.slide .cd-words-wrapper {
     overflow: hidden;
     vertical-align: top;
 }
 .cd-headline.slide b {
     opacity: 0;
     top: .2em;
 }
 .cd-headline.slide b.is-visible {
     top: 0;
     opacity: 1;
     -webkit-animation: slide-in 0.6s;
     -moz-animation: slide-in 0.6s;
     animation: slide-in 0.6s;
 }
 .cd-headline.slide b.is-hidden {
     -webkit-animation: slide-out 0.6s;
     -moz-animation: slide-out 0.6s;
     animation: slide-out 0.6s;
 }
 @-webkit-keyframes slide-in {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-100%);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateY(20%);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
     }
 }
 @-moz-keyframes slide-in {
     0% {
         opacity: 0;
         -moz-transform: translateY(-100%);
     }
     60% {
         opacity: 1;
         -moz-transform: translateY(20%);
     }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
     }
 }
 @keyframes slide-in {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-100%);
         -moz-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
         transform: translateY(-100%);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateY(20%);
         -moz-transform: translateY(20%);
         -ms-transform: translateY(20%);
         -o-transform: translateY(20%);
         transform: translateY(20%);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0);
     }
 }
 @-webkit-keyframes slide-out {
     0% {
         opacity: 1;
         -webkit-transform: translateY(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateY(120%);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateY(100%);
     }
 }
 @-moz-keyframes slide-out {
     0% {
         opacity: 1;
         -moz-transform: translateY(0);
     }
     60% {
         opacity: 0;
         -moz-transform: translateY(120%);
     }
     100% {
         opacity: 0;
         -moz-transform: translateY(100%);
     }
 }
 @keyframes slide-out {
     0% {
         opacity: 1;
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateY(120%);
         -moz-transform: translateY(120%);
         -ms-transform: translateY(120%);
         -o-transform: translateY(120%);
         transform: translateY(120%);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateY(100%);
         -moz-transform: translateY(100%);
         -ms-transform: translateY(100%);
         -o-transform: translateY(100%);
         transform: translateY(100%);
     }
 }
 /* -------------------------------- 

xclip 

-------------------------------- */
 .cd-headline.clip span {
     display: inline-block;
     padding: .2em 0;
 }
 .cd-headline.clip .cd-words-wrapper {
     overflow: hidden;
     vertical-align: top;
 }
 .cd-headline.clip .cd-words-wrapper::after {
     /* line */
     content:'';
     position: absolute;
     top: 0;
     right: 0;
     width: 2px;
     height: 100%;
     background-color: #aebcb9;
 }
 .cd-headline.clip b {
     opacity: 0;
 }
 .cd-headline.clip b.is-visible {
     opacity: 1;
 }
 /* -------------------------------- 

xzoom 

-------------------------------- */
 .cd-headline.zoom .cd-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }
 .cd-headline.zoom b {
     opacity: 0;
 }
 .cd-headline.zoom b.is-visible {
     opacity: 1;
     -webkit-animation: zoom-in 0.8s;
     -moz-animation: zoom-in 0.8s;
     animation: zoom-in 0.8s;
 }
 .cd-headline.zoom b.is-hidden {
     -webkit-animation: zoom-out 0.8s;
     -moz-animation: zoom-out 0.8s;
     animation: zoom-out 0.8s;
 }
 @-webkit-keyframes zoom-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(100px);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(0);
     }
 }
 @-moz-keyframes zoom-in {
     0% {
         opacity: 0;
         -moz-transform: translateZ(100px);
     }
     100% {
         opacity: 1;
         -moz-transform: translateZ(0);
     }
 }
 @keyframes zoom-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(100px);
         -moz-transform: translateZ(100px);
         -ms-transform: translateZ(100px);
         -o-transform: translateZ(100px);
         transform: translateZ(100px);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(0);
         -moz-transform: translateZ(0);
         -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
         transform: translateZ(0);
     }
 }
 @-webkit-keyframes zoom-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(0);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-100px);
     }
 }
 @-moz-keyframes zoom-out {
     0% {
         opacity: 1;
         -moz-transform: translateZ(0);
     }
     100% {
         opacity: 0;
         -moz-transform: translateZ(-100px);
     }
 }
 @keyframes zoom-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(0);
         -moz-transform: translateZ(0);
         -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
         transform: translateZ(0);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-100px);
         -moz-transform: translateZ(-100px);
         -ms-transform: translateZ(-100px);
         -o-transform: translateZ(-100px);
         transform: translateZ(-100px);
     }
 }
 /* -------------------------------- 

xrotate-3 

-------------------------------- */
 .cd-headline.rotate-3 .cd-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }
 .cd-headline.rotate-3 i {
     display: inline-block;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
 }
 .is-visible .cd-headline.rotate-3 i {
     -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg);
     -o-transform: rotateY(0deg);
     transform: rotateY(0deg);
 }
 .cd-headline.rotate-3 i.in {
     -webkit-animation: cd-rotate-3-in 0.6s forwards;
     -moz-animation: cd-rotate-3-in 0.6s forwards;
     animation: cd-rotate-3-in 0.6s forwards;
 }
 .cd-headline.rotate-3 i.out {
     -webkit-animation: cd-rotate-3-out 0.6s forwards;
     -moz-animation: cd-rotate-3-out 0.6s forwards;
     animation: cd-rotate-3-out 0.6s forwards;
 }
 .no-csstransitions .cd-headline.rotate-3 i {
     -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg);
     -o-transform: rotateY(0deg);
     transform: rotateY(0deg);
     opacity: 0;
 }
 .no-csstransitions .cd-headline.rotate-3 .is-visible i {
     opacity: 1;
 }
 @-webkit-keyframes cd-rotate-3-in {
     0% {
         -webkit-transform: rotateY(180deg);
     }
     100% {
         -webkit-transform: rotateY(0deg);
     }
 }
 @-moz-keyframes cd-rotate-3-in {
     0% {
         -moz-transform: rotateY(180deg);
     }
     100% {
         -moz-transform: rotateY(0deg);
     }
 }
 @keyframes cd-rotate-3-in {
     0% {
         -webkit-transform: rotateY(180deg);
         -moz-transform: rotateY(180deg);
         -ms-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
     }
     100% {
         -webkit-transform: rotateY(0deg);
         -moz-transform: rotateY(0deg);
         -ms-transform: rotateY(0deg);
         -o-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }
 }
 @-webkit-keyframes cd-rotate-3-out {
     0% {
         -webkit-transform: rotateY(0);
     }
     100% {
         -webkit-transform: rotateY(-180deg);
     }
 }
 @-moz-keyframes cd-rotate-3-out {
     0% {
         -moz-transform: rotateY(0);
     }
     100% {
         -moz-transform: rotateY(-180deg);
     }
 }
 @keyframes cd-rotate-3-out {
     0% {
         -webkit-transform: rotateY(0);
         -moz-transform: rotateY(0);
         -ms-transform: rotateY(0);
         -o-transform: rotateY(0);
         transform: rotateY(0);
     }
     100% {
         -webkit-transform: rotateY(-180deg);
         -moz-transform: rotateY(-180deg);
         -ms-transform: rotateY(-180deg);
         -o-transform: rotateY(-180deg);
         transform: rotateY(-180deg);
     }
 }
 /* -------------------------------- 

xscale 

-------------------------------- */
 .cd-headline.scale i {
     display: inline-block;
     opacity: 0;
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
     -ms-transform: scale(0);
     -o-transform: scale(0);
     transform: scale(0);
 }
 .is-visible .cd-headline.scale i {
     opacity: 1;
 }
 .cd-headline.scale i.in {
     -webkit-animation: scale-up 0.6s forwards;
     -moz-animation: scale-up 0.6s forwards;
     animation: scale-up 0.6s forwards;
 }
 .cd-headline.scale i.out {
     -webkit-animation: scale-down 0.6s forwards;
     -moz-animation: scale-down 0.6s forwards;
     animation: scale-down 0.6s forwards;
 }
 .no-csstransitions .cd-headline.scale i {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
     opacity: 0;
 }
 .no-csstransitions .cd-headline.scale .is-visible i {
     opacity: 1;
 }
 @-webkit-keyframes scale-up {
     0% {
         -webkit-transform: scale(0);
         opacity: 0;
     }
     60% {
         -webkit-transform: scale(1.2);
         opacity: 1;
     }
     100% {
         -webkit-transform: scale(1);
         opacity: 1;
     }
 }
 @-moz-keyframes scale-up {
     0% {
         -moz-transform: scale(0);
         opacity: 0;
     }
     60% {
         -moz-transform: scale(1.2);
         opacity: 1;
     }
     100% {
         -moz-transform: scale(1);
         opacity: 1;
     }
 }
 @keyframes scale-up {
     0% {
         -webkit-transform: scale(0);
         -moz-transform: scale(0);
         -ms-transform: scale(0);
         -o-transform: scale(0);
         transform: scale(0);
         opacity: 0;
     }
     60% {
         -webkit-transform: scale(1.2);
         -moz-transform: scale(1.2);
         -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
         transform: scale(1.2);
         opacity: 1;
     }
     100% {
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -ms-transform: scale(1);
         -o-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }
 }
 @-webkit-keyframes scale-down {
     0% {
         -webkit-transform: scale(1);
         opacity: 1;
     }
     60% {
         -webkit-transform: scale(0);
         opacity: 0;
     }
 }
 @-moz-keyframes scale-down {
     0% {
         -moz-transform: scale(1);
         opacity: 1;
     }
     60% {
         -moz-transform: scale(0);
         opacity: 0;
     }
 }
 @keyframes scale-down {
     0% {
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -ms-transform: scale(1);
         -o-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }
     60% {
         -webkit-transform: scale(0);
         -moz-transform: scale(0);
         -ms-transform: scale(0);
         -o-transform: scale(0);
         transform: scale(0);
         opacity: 0;
     }
 }
 /* -------------------------------- 

xpush 

-------------------------------- */
 .cd-headline.push b {
     opacity: 0;
 }
 .cd-headline.push b.is-visible {
     opacity: 1;
     -webkit-animation: push-in 0.6s;
     -moz-animation: push-in 0.6s;
     animation: push-in 0.6s;
 }
 .cd-headline.push b.is-hidden {
     -webkit-animation: push-out 0.6s;
     -moz-animation: push-out 0.6s;
     animation: push-out 0.6s;
 }
 @-webkit-keyframes push-in {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100%);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateX(10%);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
     }
 }
 @-moz-keyframes push-in {
     0% {
         opacity: 0;
         -moz-transform: translateX(-100%);
     }
     60% {
         opacity: 1;
         -moz-transform: translateX(10%);
     }
     100% {
         opacity: 1;
         -moz-transform: translateX(0);
     }
 }
 @keyframes push-in {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100%);
         -moz-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
         -o-transform: translateX(-100%);
         transform: translateX(-100%);
     }
     60% {
         opacity: 1;
         -webkit-transform: translateX(10%);
         -moz-transform: translateX(10%);
         -ms-transform: translateX(10%);
         -o-transform: translateX(10%);
         transform: translateX(10%);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
         transform: translateX(0);
     }
 }
 @-webkit-keyframes push-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateX(110%);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateX(100%);
     }
 }
 @-moz-keyframes push-out {
     0% {
         opacity: 1;
         -moz-transform: translateX(0);
     }
     60% {
         opacity: 0;
         -moz-transform: translateX(110%);
     }
     100% {
         opacity: 0;
         -moz-transform: translateX(100%);
     }
 }
 @keyframes push-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
         transform: translateX(0);
     }
     60% {
         opacity: 0;
         -webkit-transform: translateX(110%);
         -moz-transform: translateX(110%);
         -ms-transform: translateX(110%);
         -o-transform: translateX(110%);
         transform: translateX(110%);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateX(100%);
         -moz-transform: translateX(100%);
         -ms-transform: translateX(100%);
         -o-transform: translateX(100%);
         transform: translateX(100%);
     }
 }
              
            
!

JS

              
                jQuery(document).ready(function ($) {
    //set animation timing
    var animationDelay = 2500,
        //loading bar effect
        barAnimationDelay = 3800,
        barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
        //letters effect
        lettersDelay = 50,
        //type effect
        typeLettersDelay = 150,
        selectionDuration = 500,
        typeAnimationDelay = selectionDuration + 800,
        //clip effect 
        revealDuration = 600,
        revealAnimationDelay = 1500;

    initHeadline();


    function initHeadline() {
        //insert <i> element for each letter of a changing word
        singleLetters($('.cd-headline.letters').find('b'));
        //initialise headline animation
        animateHeadline($('.cd-headline'));
    }

    function singleLetters($words) {
        $words.each(function () {
            var word = $(this),
                letters = word.text().split(''),
                selected = word.hasClass('is-visible');
            for (i in letters) {
                if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
                letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
            }
            var newLetters = letters.join('');
            word.html(newLetters);
        });
    }

    function animateHeadline($headlines) {
        var duration = animationDelay;
        $headlines.each(function () {
            var headline = $(this);

            if (headline.hasClass('loading-bar')) {
                duration = barAnimationDelay;
                setTimeout(function () {
                    headline.find('.cd-words-wrapper').addClass('is-loading')
                }, barWaiting);
            } else if (headline.hasClass('clip')) {
                var spanWrapper = headline.find('.cd-words-wrapper'),
                    newWidth = spanWrapper.width() + 10
                    spanWrapper.css('width', newWidth);
            } else if (!headline.hasClass('type')) {
                //assign to .cd-words-wrapper the width of its longest word
                var words = headline.find('.cd-words-wrapper b'),
                    width = 0;
                words.each(function () {
                    var wordWidth = $(this).width();
                    if (wordWidth > width) width = wordWidth;
                });
                headline.find('.cd-words-wrapper').css('width', width);
            };

            //trigger animation
            setTimeout(function () {
                hideWord(headline.find('.is-visible').eq(0))
            }, duration);
        });
    }

    function hideWord($word) {
        var nextWord = takeNext($word);

        if ($word.parents('.cd-headline').hasClass('type')) {
            var parentSpan = $word.parent('.cd-words-wrapper');
            parentSpan.addClass('selected').removeClass('waiting');
            setTimeout(function () {
                parentSpan.removeClass('selected');
                $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
            }, selectionDuration);
            setTimeout(function () {
                showWord(nextWord, typeLettersDelay)
            }, typeAnimationDelay);

        } else if ($word.parents('.cd-headline').hasClass('letters')) {
            var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
            hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
            showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

        } else if ($word.parents('.cd-headline').hasClass('clip')) {
            $word.parents('.cd-words-wrapper').animate({
                width: '2px'
            }, revealDuration, function () {
                switchWord($word, nextWord);
                showWord(nextWord);
            });

        } else if ($word.parents('.cd-headline').hasClass('loading-bar')) {
            $word.parents('.cd-words-wrapper').removeClass('is-loading');
            switchWord($word, nextWord);
            setTimeout(function () {
                hideWord(nextWord)
            }, barAnimationDelay);
            setTimeout(function () {
                $word.parents('.cd-words-wrapper').addClass('is-loading')
            }, barWaiting);

        } else {
            switchWord($word, nextWord);
            setTimeout(function () {
                hideWord(nextWord)
            }, animationDelay);
        }
    }

    function showWord($word, $duration) {
        if ($word.parents('.cd-headline').hasClass('type')) {
            showLetter($word.find('i').eq(0), $word, false, $duration);
            $word.addClass('is-visible').removeClass('is-hidden');

        } else if ($word.parents('.cd-headline').hasClass('clip')) {
            $word.parents('.cd-words-wrapper').animate({
                'width': $word.width() + 10
            }, revealDuration, function () {
                setTimeout(function () {
                    hideWord($word)
                }, revealAnimationDelay);
            });
        }
    }

    function hideLetter($letter, $word, $bool, $duration) {
        $letter.removeClass('in').addClass('out');

        if (!$letter.is(':last-child')) {
            setTimeout(function () {
                hideLetter($letter.next(), $word, $bool, $duration);
            }, $duration);
        } else if ($bool) {
            setTimeout(function () {
                hideWord(takeNext($word))
            }, animationDelay);
        }

        if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
            var nextWord = takeNext($word);
            switchWord($word, nextWord);
        }
    }

    function showLetter($letter, $word, $bool, $duration) {
        $letter.addClass('in').removeClass('out');

        if (!$letter.is(':last-child')) {
            setTimeout(function () {
                showLetter($letter.next(), $word, $bool, $duration);
            }, $duration);
        } else {
            if ($word.parents('.cd-headline').hasClass('type')) {
                setTimeout(function () {
                    $word.parents('.cd-words-wrapper').addClass('waiting');
                }, 200);
            }
            if (!$bool) {
                setTimeout(function () {
                    hideWord($word)
                }, animationDelay)
            }
        }
    }

    function takeNext($word) {
        return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
    }

    function takePrev($word) {
        return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
    }

    function switchWord($oldWord, $newWord) {
        $oldWord.removeClass('is-visible').addClass('is-hidden');
        $newWord.removeClass('is-hidden').addClass('is-visible');
    }
});
              
            
!
999px

Console