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.

            
              <div id="wrap">
			<main>
        <!-- 16:9 Framing -->
        <div class="movie_title_container">
					<div class="movie_title_frame">
					    <div class="movie_title">
                <!-- Lines -->  
                <div class="lines">
					           <div class="lines_horiz">
					                <div class="line_horiz_container line_horiz_01">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_02">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_03">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_04">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_05">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_06">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_07">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_08">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_09">
                            <div class="line line_horiz"></div>
                          </div>
			                
			                		<div class="line_horiz_container line_horiz_10">
                            <div class="line line_horiz"></div>
                          </div>
				                
					                <div class="line_horiz_container line_horiz_11">
                            <div class="line line_horiz"></div>
                          </div>
					                
					                <div class="line_horiz_container line_horiz_12">
                            <div class="line line_horiz"></div>
					                </div>
					                
					                <div class="line_horiz_container line_horiz_13">
                            <div class="line line_horiz"></div>
                          </div>
					            
					            	<div class="line_horiz_container line_horiz_14">
                          <div class="line line_horiz"></div>
                        </div>
					            
					            	<div class="line_horiz_container line_horiz_15">
                          <div class="line line_horiz"></div>
                        </div>
					            
					            	<div class="line_horiz_container line_horiz_16">
                          <div class="line line_horiz"></div>
                        </div>
					            
					            	<div class="line_horiz_container line_horiz_17">
                          <div class="line line_horiz"></div>
                        </div>
					            
					            	<div class="line_horiz_container line_horiz_18">
                          <div class="line line_horiz"></div>
                        </div>
					            </div>
					            
					            <div class="lines_vert">
					                <div class="line_vert_container line_vert_01">
                            <div class="line line_vert line_vert_btt"></div>
                          </div>
				            
                          <div class="line_vert_container line_vert_02">
                            <div class="line line_vert line_vert_btt"></div>
                          </div>
				            
				            		<div class="line_vert_container line_vert_03">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_04">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_05">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_06">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_07">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_08">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_09">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_10">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_11">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_12">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_13">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_14">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_15">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_16">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_17">
                          <div class="line line_vert line_vert_btt"></div>
                        </div>
				                
                        <div class="line_vert_container line_vert_18">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_19">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_20">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_21">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_22">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_23">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_24">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_25">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_26">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_27">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_28">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_29">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_30">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_31">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_32">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_33">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_34">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_35">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_36">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_37">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_38">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_39">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
				            
				            		<div class="line_vert_container line_vert_40">
                          <div class="line line_vert line_vert_ttb"></div>
                        </div>
					            </div>
					        </div>
					        
                  <!-- Titles -->
					        <div class="titles">
								    <!-- 'Metro Goldwyn Mayer Presents' -->
					        	<div class="metro_goldwyn_mayer">
					        		<img src="https://webslinger.com.au/pens/nbnw/metro_goldwyn_mayer.svg">
					        	</div>
					        	<div class="presents">
					        		<img src="https://webslinger.com.au/pens/nbnw/presents.svg">
					        	</div>
					        	
								    <!-- 'Cary Grant' -->
				        		<div class="cary_grant">
					        		<img src="https://webslinger.com.au/pens/nbnw/cary_grant.svg">
					        	</div>
					        	<div class="shape_01">
					        		<img src="https://webslinger.com.au/pens/nbnw/shape_01.svg">
					        	</div>
					        	
					        	<!-- 'Eva Marie Saint' -->
				        		<div class="eva_marie_saint">
					        		<img src="https://webslinger.com.au/pens/nbnw/eva_marie_saint.svg">
					        	</div>
					        	<div class="shape_02">
					        		<img src="https://webslinger.com.au/pens/nbnw/shape_02.svg">
					        	</div>
					        	
					        	<!-- 'James Mason' -->
				        		<div class="james_mason">
					        		<img src="https://webslinger.com.au/pens/nbnw/james_mason.svg">
					        	</div>
					        	<div class="shape_03">
					        		<img src="https://webslinger.com.au/pens/nbnw/shape_03.svg">
					        	</div>
					        	
					        	<!-- 'in Alfred Hitchcock's' -->
				        		<div class="in_alfred_hitchcocks">
					        		<img src="https://webslinger.com.au/pens/nbnw/in_alfred_hitchcocks.svg">
					        	</div>
					        	<div class="shape_04">
					        		<img src="https://webslinger.com.au/pens/nbnw/shape_04.svg">
					        	</div>
					        	
					        	<!-- 'North by Northwest' -->
				        		<div class="north_by_northwest">
					        		<img src="https://webslinger.com.au/pens/nbnw/north_by_northwest.svg">
					        	</div>
					        	<div class="shape_05">
					        		<img src="https://webslinger.com.au/pens/nbnw/shape_05.svg">
					        	</div>
					        	
					        	<!-- 'MGM Copyright' -->
				        		<div class="mgm_copyright">
					        		<img src="https://webslinger.com.au/pens/nbnw/mgm_coyright.png">
					        	</div>
					        </div>
					    </div>
					</div>
				</div>
			</main>
		</div>
            
          
!
            
              body { background-color: #000; }
.movie_title { background-color: #078726; }

/* LINES
======================================================== */

.line { position: absolute; background-color: #005659; }

.line_horiz {
  width: 200%;
	height: 2px;
	-webkit-animation: line_rtl 6.4s 1 forwards cubic-bezier(0.125, 0.055, 0.830, 0.570);
          animation: line_rtl 6.4s 1 forwards cubic-bezier(0.125, 0.055, 0.830, 0.570);
}
.line_vert { opacity: 0; width: 2px; height: 300%; }

.line_vert_btt {
	-webkit-animation: line_btt 4.3s 1 3.8s forwards linear;
          animation: line_btt 4.3s 1 3.8s forwards linear;
}
.line_vert_ttb {
	-webkit-animation: line_ttb 5.2s 1 2.6s forwards linear;
          animation: line_ttb 5.2s 1 2.6s forwards linear;
}

.line_horiz_container { position: absolute; width: 100%; }
.line_vert_container { position: absolute; height: 100%; }

/* Horizontal Lines Settings */
.line_horiz_01 {
	top: -22%;
	-webkit-transform: rotate(-20deg) translate(7%,0);
      -ms-transform: rotate(-20deg) translate(7%,0);
          transform: rotate(-20deg) translate(7%,0);
}
.line_horiz_02 {
	top: -11%;
	-webkit-transform: rotate(-22deg) translate(-1.5%,0);
      -ms-transform: rotate(-22deg) translate(-1.5%,0);
          transform: rotate(-22deg) translate(-1.5%,0);
}
.line_horiz_03 {
	top: -6%;
	-webkit-transform: rotate(-22deg) translate(3%,0);
      -ms-transform: rotate(-22deg) translate(3%,0);
          transform: rotate(-22deg) translate(3%,0);
}
.line_horiz_04 {
	top: 6%;
	-webkit-transform: rotate(-23.5deg) translate(-7%,0);
      -ms-transform: rotate(-23.5deg) translate(-7%,0);
          transform: rotate(-23.5deg) translate(-7%,0);
}
.line_horiz_05 {
	top: 18%;
	-webkit-transform: rotate(-25deg) translate(3%,0);
      -ms-transform: rotate(-25deg) translate(3%,0);
          transform: rotate(-25deg) translate(3%,0);
}
.line_horiz_06 {
	top: 23%;
	-webkit-transform: rotate(-26deg) translate(5%,0);
      -ms-transform: rotate(-26deg) translate(5%,0);
          transform: rotate(-26deg) translate(5%,0);
}
.line_horiz_07 {
	top: 34.5%;
	-webkit-transform: rotate(-27.2deg) translate(-1%,0);
      -ms-transform: rotate(-27.2deg) translate(-1%,0);
          transform: rotate(-27.2deg) translate(-1%,0);
}
.line_horiz_08 {
	top: 47%;
	-webkit-transform: rotate(-28.2deg) translate(1.5%,0);
      -ms-transform: rotate(-28.2deg) translate(1.5%,0);
          transform: rotate(-28.2deg) translate(1.5%,0);
}
.line_horiz_09 {
	top: 51%;
	-webkit-transform: rotate(-28.5deg) translate(-3%,0);
      -ms-transform: rotate(-28.5deg) translate(-3%,0);
          transform: rotate(-28.5deg) translate(-3%,0);
}
.line_horiz_10 {
	top: 64.2%;
	-webkit-transform: rotate(-30.3deg) translate(-0.5%,0);
      -ms-transform: rotate(-30.3deg) translate(-0.5%,0);
          transform: rotate(-30.3deg) translate(-0.5%,0);
}
.line_horiz_11 {
	top: 76%;
	-webkit-transform: rotate(-31.6deg) translate(4%,0);
      -ms-transform: rotate(-31.6deg) translate(4%,0);
          transform: rotate(-31.6deg) translate(4%,0);
}
.line_horiz_12 {
	top: 80%;
	-webkit-transform: rotate(-32deg) translate(-4%,0);
      -ms-transform: rotate(-32deg) translate(-4%,0);
          transform: rotate(-32deg) translate(-4%,0);
}
.line_horiz_13 {
	top: 90.8%;
	-webkit-transform: rotate(-33.5deg) translate(-2%,0);
      -ms-transform: rotate(-33.5deg) translate(-2%,0);
          transform: rotate(-33.5deg) translate(-2%,0);
}
.line_horiz_14 {
	top: 102.5%;
	padding-left: 1.5%;
	-webkit-transform: rotate(-34.5deg);
      -ms-transform: rotate(-34.5deg);
          transform: rotate(-34.5deg);
}
.line_horiz_15 {
	top: 106.5%;
	padding-left: 0%;
	-webkit-transform: rotate(-34.7deg);
      -ms-transform: rotate(-34.7deg);
          transform: rotate(-34.7deg);
}
.line_horiz_16 {
	top: 116.6%;
	padding-left: 5%;
	-webkit-transform: rotate(-35.4deg);
      -ms-transform: rotate(-35.4deg);
          transform: rotate(-35.4deg);
}
.line_horiz_17 {
	top: 127.5%;
	padding-left: 2%;
	-webkit-transform: rotate(-36.5deg);
      -ms-transform: rotate(-36.5deg);
          transform: rotate(-36.5deg);
}
.line_horiz_18 {
	top: 134.5%;
	-webkit-transform: rotate(-37.5deg);
      -ms-transform: rotate(-37.5deg);
          transform: rotate(-37.5deg);
}

/* Vertical Lines Settings */
.line_vert_01 {
	left: 3.3%;
	-webkit-transform: rotate(-2deg) translate(0,-140%);
      -ms-transform: rotate(-2deg) translate(0,-140%);
          transform: rotate(-2deg) translate(0,-140%);
}
.line_vert_02 {
	left: 7%;
	-webkit-transform: rotate(-2deg) translate(0,-33%);
      -ms-transform: rotate(-2deg) translate(0,-33%);
          transform: rotate(-2deg) translate(0,-33%);
}
.line_vert_03 {
	left: 10.6%;
	-webkit-transform: rotate(-1.6deg) translate(0,-117%);
      -ms-transform: rotate(-1.6deg) translate(0,-117%);
          transform: rotate(-1.6deg) translate(0,-117%);
}
.line_vert_04 {
	left: 14.2%;
	-webkit-transform: rotate(-1.4deg) translate(0,-85%);
      -ms-transform: rotate(-1.4deg) translate(0,-85%);
          transform: rotate(-1.4deg) translate(0,-85%);
}
.line_vert_05 {
	left: 17.5%;
	-webkit-transform: rotate(-1.4deg) translate(0,-13%);
      -ms-transform: rotate(-1.4deg) translate(0,-13%);
          transform: rotate(-1.4deg) translate(0,-13%);
}
.line_vert_06 {
	left: 21%;
	-webkit-transform: rotate(-1.2deg) translate(0,-95%);
      -ms-transform: rotate(-1.2deg) translate(0,-95%);
          transform: rotate(-1.2deg) translate(0,-95%);
}
.line_vert_07 {
	left: 24%;
	-webkit-transform: rotate(-1.2deg) translate(0,-58%);
      -ms-transform: rotate(-1.2deg) translate(0,-58%);
          transform: rotate(-1.2deg) translate(0,-58%);
}
.line_vert_08 {
	left: 27%;
	-webkit-transform: rotate(-1deg) translate(0,-81%);
      -ms-transform: rotate(-1deg) translate(0,-81%);
          transform: rotate(-1deg) translate(0,-81%);
}
.line_vert_09 {
	left: 30%;
	-webkit-transform: rotate(-1deg) translate(0,-52%);
      -ms-transform: rotate(-1deg) translate(0,-52%);
          transform: rotate(-1deg) translate(0,-52%);
}
.line_vert_10 {
	left: 33%;
	-webkit-transform: rotate(-0.8deg) translate(0,-137%);
      -ms-transform: rotate(-0.8deg) translate(0,-137%);
          transform: rotate(-0.8deg) translate(0,-137%);
}
.line_vert_11 {
	left: 36%;
	-webkit-transform: rotate(-0.6deg) translate(0,-103%);
      -ms-transform: rotate(-0.6deg) translate(0,-103%);
          transform: rotate(-0.6deg) translate(0,-103%);
}
.line_vert_12 {
	left: 39%;
	-webkit-transform: rotate(-0.5deg) translate(0,-166%);
      -ms-transform: rotate(-0.5deg) translate(0,-166%);
          transform: rotate(-0.5deg) translate(0,-166%);
}
.line_vert_13 {
	left: 41.6%;
	-webkit-transform: rotate(-0.5deg) translate(0,-45%);
      -ms-transform: rotate(-0.5deg) translate(0,-45%);
          transform: rotate(-0.5deg) translate(0,-45%);
}
.line_vert_14 {
	left: 44.5%;
	-webkit-transform: rotate(-0.3deg) translate(0,-80%);
      -ms-transform: rotate(-0.3deg) translate(0,-80%);
          transform: rotate(-0.3deg) translate(0,-80%);
}
.line_vert_15 {
	left: 47.4%;
	-webkit-transform: rotate(-0.3deg) translate(0,-157%);
      -ms-transform: rotate(-0.3deg) translate(0,-157%);
          transform: rotate(-0.3deg) translate(0,-157%);
}
.line_vert_16 {
	left: 49.8%;
	-webkit-transform: rotate(-0.2deg) translate(0,-72%);
      -ms-transform: rotate(-0.2deg) translate(0,-72%);
          transform: rotate(-0.2deg) translate(0,-72%);
}
.line_vert_17 {
	left: 52.1%;
	-webkit-transform: rotate(-0.1deg) translate(0,-109%);
      -ms-transform: rotate(-0.1deg) translate(0,-109%);
          transform: rotate(-0.1deg) translate(0,-109%);
}
.line_vert_18 {
	left: 54.9%;
	-webkit-transform: rotate(0.1deg) translate(0,-83%);
      -ms-transform: rotate(0.1deg) translate(0,-83%);
          transform: rotate(0.1deg) translate(0,-83%);
}
.line_vert_19 {
	left: 57%;
	-webkit-transform: rotate(0.1deg) translate(0,-61%);
      -ms-transform: rotate(0.1deg) translate(0,-61%);
          transform: rotate(0.1deg) translate(0,-61%);
}
.line_vert_20 {
	left: 59.1%;
	-webkit-transform: rotate(0.2deg) translate(0,-92%);
      -ms-transform: rotate(0.2deg) translate(0,-92%);
          transform: rotate(0.2deg) translate(0,-92%);
}
.line_vert_21 {
	left: 61.5%;
	-webkit-transform: rotate(0.4deg) translate(0,0%);
      -ms-transform: rotate(0.4deg) translate(0,0%);
          transform: rotate(0.4deg) translate(0,0%);
}
.line_vert_22 {
	left: 64%;
	-webkit-transform: rotate(0.4deg) translate(0,-59%);
      -ms-transform: rotate(0.4deg) translate(0,-59%);
          transform: rotate(0.4deg) translate(0,-59%);
}
.line_vert_23 {
	left: 66.2%;
	-webkit-transform: rotate(0.4deg) translate(0,-94%);
      -ms-transform: rotate(0.4deg) translate(0,-94%);
          transform: rotate(0.4deg) translate(0,-94%);
}
.line_vert_24 {
	left: 68.4%;
	-webkit-transform: rotate(0.6deg) translate(0,-123%);
      -ms-transform: rotate(0.6deg) translate(0,-123%);
          transform: rotate(0.6deg) translate(0,-123%);
}
.line_vert_25 {
	left: 70.6%;
	-webkit-transform: rotate(0.7deg) translate(0,11%);
      -ms-transform: rotate(0.7deg) translate(0,11%);
          transform: rotate(0.7deg) translate(0,11%);
}
.line_vert_26 {
	left: 73.1%;
	-webkit-transform: rotate(0.6deg) translate(0,-71%);
      -ms-transform: rotate(0.6deg) translate(0,-71%);
          transform: rotate(0.6deg) translate(0,-71%);
}
.line_vert_27 {
	left: 75.1%;
	-webkit-transform: rotate(0.6deg) translate(0,-126%);
      -ms-transform: rotate(0.6deg) translate(0,-126%);
          transform: rotate(0.6deg) translate(0,-126%);
}
.line_vert_28 {
	left: 77.3%;
	-webkit-transform: rotate(0.8deg) translate(0,-1%);
      -ms-transform: rotate(0.8deg) translate(0,-1%);
          transform: rotate(0.8deg) translate(0,-1%);
}
.line_vert_29 {
	left: 79.2%;
	-webkit-transform: rotate(0.8deg) translate(0,-125%);
      -ms-transform: rotate(0.8deg) translate(0,-125%);
          transform: rotate(0.8deg) translate(0,-125%);
}
.line_vert_30 {
	left: 80.6%;
	-webkit-transform: rotate(0.9deg) translate(0,0%);
      -ms-transform: rotate(0.9deg) translate(0,0%);
          transform: rotate(0.9deg) translate(0,0%);
}
.line_vert_31 {
	left: 82.6%;
	-webkit-transform: rotate(0.9deg) translate(0,-100%);
      -ms-transform: rotate(0.9deg) translate(0,-100%);
          transform: rotate(0.9deg) translate(0,-100%);
}
.line_vert_32 {
	left: 84.4%;
	-webkit-transform: rotate(1deg) translate(0,-24%);
      -ms-transform: rotate(1deg) translate(0,-24%);
          transform: rotate(1deg) translate(0,-24%);
}
.line_vert_33 {
	left: 86.1%;
	-webkit-transform: rotate(1deg) translate(0,-123%);
      -ms-transform: rotate(1deg) translate(0,-123%);
          transform: rotate(1deg) translate(0,-123%);
}
.line_vert_34 {
	left: 87.8%;
	-webkit-transform: rotate(0.9deg) translate(0,-92%);
      -ms-transform: rotate(0.9deg) translate(0,-92%);
          transform: rotate(0.9deg) translate(0,-92%);
}
.line_vert_35 {
	left: 89.5%;
	-webkit-transform: rotate(0.8deg) translate(0,-121%);
      -ms-transform: rotate(0.8deg) translate(0,-121%);
          transform: rotate(0.8deg) translate(0,-121%);
}
.line_vert_36 {
	left: 92.7%;
	-webkit-transform: rotate(1deg) translate(0,-19%);
      -ms-transform: rotate(1deg) translate(0,-19%);
          transform: rotate(1deg) translate(0,-19%);
}
.line_vert_37 {
	left: 94.6%;
	-webkit-transform: rotate(1deg) translate(0,-143%);
      -ms-transform: rotate(1deg) translate(0,-143%);
          transform: rotate(1deg) translate(0,-143%);
}
.line_vert_38 {
	left: 96%;
	-webkit-transform: rotate(1deg) translate(0,-89%);
      -ms-transform: rotate(1deg) translate(0,-89%);
          transform: rotate(1deg) translate(0,-89%);
}
.line_vert_39 {
	left: 97.4%;
	-webkit-transform: rotate(1.4deg) translate(0,-140%);
      -ms-transform: rotate(1.4deg) translate(0,-140%);
          transform: rotate(1.4deg) translate(0,-140%);
}
.line_vert_40 {
	left: 99%;
	-webkit-transform: rotate(1.2deg) translate(0,-32%);
      -ms-transform: rotate(1.2deg) translate(0,-32%);
          transform: rotate(1.2deg) translate(0,-32%);
}

/* Horizontal lines keyframes */
@-webkit-keyframes line_rtl {
    from { transform: translate( 57%, 0); }
    to { transform: translate( -10%, 0); }
}
@keyframes line_rtl {
    from { transform: translate( 57%, 0); }
    to { transform: translate( -10%, 0); }
}

/* Vertical lines (from bottom to top) keyframes */
@-webkit-keyframes line_btt {
    from { opacity: 1; transform: translate( 0, 100%); }
    to { opacity: 1; transform: translate( 0, 0%); }
}
@keyframes line_btt {
    from { opacity: 1; transform: translate( 0, 100%); }
    to { opacity: 1; transform: translate( 0, 0%); }
}

/* Vertical lines (from top to bottom) keyframes */
@-webkit-keyframes line_ttb {
    from { opacity: 1; transform: translate( 0, -100%); }
    to { opacity: 1; transform: translate( 0, -10%); }
}
@keyframes line_ttb {
    from { opacity: 1; transform: translate( 0, -100%); }
    to { opacity: 1; transform: translate( 0, -10%); }
}


/* TEXT & TITLES
======================================================== */

.titles { position: absolute; width: 100%; height: 100%; }
.titles img { position: absolute; }

/* First Title - "Metro Goldwyn Mayer Presents" */
.metro_goldwyn_mayer img {
	top: 37.5%;
	left: 29.3%;
	width: 27%;
	opacity: 0;
	-webkit-animation: title_1_1 4.4s 1 8s forwards linear;
          animation: title_1_1 4.4s 1 8s forwards linear;
}

@-webkit-keyframes title_1_1 {
  0% { opacity: 1; transform: translate( 0, -300%); }
	16%,84% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 300%); }
}
@keyframes title_1_1 {
  0% { opacity: 1; transform: translate( 0, -300%); }
	16%,84% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 300%); }
}

.presents img {
	top: 28.3%;
	left: 57.4%;
	width: 9.3%;
	opacity: 0;
	-webkit-animation: title_1_2 4.3s 1 8s forwards linear;
          animation: title_1_2 4.3s 1 8s forwards linear;
}

@-webkit-keyframes title_1_2 {
  0% { opacity: 1; transform: translate( 0, 500%); }
	20%,86% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}
@keyframes title_1_2 {
  0% { opacity: 1; transform: translate( 0, 500%); }
	20%,86% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}

/* Second Title - "Cary Grant" */
.cary_grant img {
	top: 21.9%;
	left: 32.5%;
	width: 33%;
	opacity: 0;
	-webkit-animation: cary_grant 6.6s 1 11.35s forwards linear;
          animation: cary_grant 6.6s 1 11.35s forwards linear;
}

@-webkit-keyframes cary_grant {
  0% { opacity: 1; transform: translate( 0, 500%); }
	27%,72% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, -500%); }
}
@keyframes cary_grant {
  0% { opacity: 1; transform: translate( 0, 500%); }
	27%,72% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, -500%); }
}

.shape_01 img {
	left: 5.3%;
	width: 18.5%;
	opacity: 0;
	-webkit-animation: shape_01 1s 1 12.25s forwards linear;
          animation: shape_01 1s 1 12.25s forwards linear;
}

@-webkit-keyframes shape_01 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}
@keyframes shape_01 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}


/* Third Title - "Eva Marie Saint" */
.eva_marie_saint img {
	top: 18.9%;
	left: 25%;
	width: 45.8%;
	opacity: 0;
	-webkit-animation: eva_marie_saint 6.6s 1 15.7s forwards linear;
          animation: eva_marie_saint 6.6s 1 15.7s forwards linear;
}

@-webkit-keyframes eva_marie_saint {
  0% { opacity: 1; transform: translate( 0, -500%); }
	27%,75% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}
@keyframes eva_marie_saint {
  0% { opacity: 1; transform: translate( 0, -500%); }
	27%,75% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}

.shape_02 img {
	right: 4.3%;
	width: 9.5%;
	opacity: 0;
	-webkit-animation: shape_02 1.5s 1 16.8s forwards linear;
          animation: shape_02 1.5s 1 16.8s forwards linear;
}

@-webkit-keyframes shape_02 {
    0% { opacity: 1; transform: translate( 0, 600%); }
    100% { opacity: 1; transform: translate( 0, -400%); }
}
@keyframes shape_02 {
    0% { opacity: 1; transform: translate( 0, 600%); }
    100% { opacity: 1; transform: translate( 0, -400%); }
}

/* Fourth Title - "James Mason" */
.james_mason img {
	top: 19%;
	left: 30.2%;
	width: 37.2%;
	opacity: 0;
	-webkit-animation: james_mason 6.7s 1 20.6s forwards linear;
          animation: james_mason 6.7s 1 20.6s forwards linear;
}

@-webkit-keyframes james_mason {
  0% { opacity: 1; transform: translate( 0, 500%); }
	27%,75% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, -500%); }
}
@keyframes james_mason {
  0% { opacity: 1; transform: translate( 0, 500%); }
	27%,75% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, -500%); }
}

.shape_03 img {
	left: 7.4%;
	width: 18.2%;
	opacity: 0;
	-webkit-animation: shape_03 1s 1 21.3s forwards linear;
          animation: shape_03 1s 1 21.3s forwards linear;	
}

@-webkit-keyframes shape_03 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}
@keyframes shape_03 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}

/* Fifth Title - "in Alfred Hitchcock's" */
.in_alfred_hitchcocks img {
	top: 12.5%;
	left: 13.3%;
	width: 61%;
	opacity: 0;
	-webkit-animation: in_alfred_hitchcocks 6.9s 1 25.2s forwards linear;
          animation: in_alfred_hitchcocks 6.9s 1 25.2s forwards linear;
}

@-webkit-keyframes in_alfred_hitchcocks {
  0% { opacity: 1; transform: translate( 0, -500%); }
	26%,72.5% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}
@keyframes in_alfred_hitchcocks {
  0% { opacity: 1; transform: translate( 0, -500%); }
	26%,72.5% { opacity: 1; transform: translate( 0, 0%); }
  100% { opacity: 1; transform: translate( 0, 500%); }
}

.shape_04 img {
	left: 5.2%;
	width: 18.2%;
	opacity: 0;
	-webkit-animation: shape_04 1s 1 25.8s forwards linear;
          animation: shape_04 1s 1 25.8s forwards linear;	
}

@-webkit-keyframes shape_04 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}
@keyframes shape_04 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 400%); }
}

/* Sixth Title - "North by Northwest" */
.north_by_northwest img {
	top: 24.5%;
	left: 32.9%;
	width: 31.5%;
	opacity: 0;
	-webkit-animation: north_by_northwest 0.4s 1 31.6s forwards linear;
          animation: north_by_northwest 0.4s 1 31.6s forwards linear;
}

@-webkit-keyframes north_by_northwest {
    0% { opacity: 1; transform: translate( 0, 100%); }
    100% { opacity: 1; transform: translate( 0, 0%); }
}
@keyframes north_by_northwest {
    0% { opacity: 1; transform: translate( 0, 100%); }
    100% { opacity: 1; transform: translate( 0, 0%); }
}

.shape_05 img {
	left: 12%;
	width: 17.4%;
	opacity: 0;
	-webkit-animation: shape_05 1.09s 1 30.7s forwards linear;
          animation: shape_05 1.09s 1 30.7s forwards linear;
}

@-webkit-keyframes shape_05 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 500%); }
}
@keyframes shape_05 {
    0% { opacity: 1; transform: translate( 0, -300%); }
    100% { opacity: 1; transform: translate( 0, 500%); }
}

/* Seventh Title - Copyright */
.mgm_copyright img {
	bottom: 2.2%;
	left: 0%;
	width: 100.2%;
	opacity: 0;
	-webkit-animation: mgm_copyright 0.4s 1 32.2s forwards linear;
          animation: mgm_copyright 0.4s 1 32.2s forwards linear;
}

@-webkit-keyframes mgm_copyright {
    0% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes mgm_copyright {
    0% { opacity: 1; }
    100% { opacity: 1; }
}
            
          
!
999px
Loading ..................

Console