cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1265 610">
            <g class="fix">
                <g class="rombos">
                    <polygon class="primero" opacity="0.5" fill="#140F45" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="dos" opacity="0.5" fill="#292890" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="tres" opacity="0.5" fill="#3A6791" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="cuatro" opacity="0.5" fill="#4EBB3A" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="cinco" opacity="0.5" fill="#9FC226" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="seis" opacity="0.5" fill="#F8CB10" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="siete" opacity="0.5" fill="#FF6407" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                    <polygon class="ocho" opacity="0.5" fill="#FD1104" points="522.6,249.4 614.4,72 641.4,72 738.4,249.4 646,423 613.4,423"/>
                </g>
            </g>
        <g class="">
               <path class="bordeojos" fill="none" stroke="#FFFFFF" stroke-width="3" d="M367.6,247.9c0,0,100.5-131.5,250-131.5 s265.8,131.5,265.8,131.5S762.3,366.3,617,366.3S367.6,247.9,367.6,247.9z"/>
                <path class="bordeojos" fill="none" stroke="#FFFFFF" stroke-width="3" d="M339.5,248.4c0,0,111-145.3,276.1-145.3 s293.6,145.3,293.6,145.3S775.5,379.2,615,379.2S339.5,248.4,339.5,248.4z"/>
            </g>
        <g class="fix-dos">
            <g class="ojos">
                <circle fill="none" stroke="#FFFFFF" stroke-width="1" cx="626" cy="245" r="44"/>
                <circle class="eyescale" fill="none" stroke="#FFFFFF" stroke-width="1" cx="626" cy="245" r="44"/>
                <circle class="eyescale2" fill="none" stroke="#FFFFFF" stroke-width="1" cx="626" cy="245" r="44"/>
                <circle class="eyescale3" fill="none" stroke="#FFFFFF" stroke-width="1" cx="626" cy="245" r="44"/>
                <circle class="eyescale4" fill="none" stroke="#FFFFFF" stroke-width="1" cx="626" cy="245" r="44"/>
            </g>
         </g>
            <g id="texto">
                <line fill="none" stroke="#000000" x1="326" y1="511.5" x2="870" y2="511.5"/>
                <text x="326" y="530">VISIBLE SPECTRUM</text>
                <text x="326" y="550">Portion of the electromagnetic spectrum that can be detected by the human eye</text>
                <text x="326" y="570">390 to 750nm</text>
                <text x="326" y="590">400-790THz</text>
            </g>
        </svg>
            
          
!
            
              html {
	background-color: antiquewhite;
}

text {
font-family: 'Lato', 'sans-serif';
font-size: 15px;
}

/*APARICION*/

.fix {
-moz-transform: translate(522px,0px);
-webkit-transform: translate(522px,0px);
}
.fix polygon {
-moz-transform: translate(-522px,-0px);
-webkit-transform: translate(-522px,-0px);
}


@-webkit-keyframes romboz {
	0% {
		-webkit-transform:scale(0,0);
		transform:scale(0,0);
	}
	100% {
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
	}
}

@-moz-keyframes romboz {
	0% {
		-moz-transform:scale(0,0);
		transform:scale(0,0);
	}
	100% {
		-moz-transform:scale(1,1);
		transform:scale(1,1);
	}
}

@-o-keyframes romboz {
	0% {
		-o-transform:scale(0,0);
		transform:scale(0,0);
	}
	100% {
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
}

@keyframes romboz {
	0% {
		-webkit-transform:scale(0,0);
		-moz-transform:scale(0,0);
		-o-transform:scale(0,0);
		transform:scale(0,0);
	}
	100% {
		-webkit-transform:scale(1,1);
		-moz-transform:scale(1,1);
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
}


.rombos {
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: romboz 1s linear 0s forwards;
-moz-animation: romboz 1s linear 0s forwards;
-o-animation: romboz 1s linear 0s forwards;
animation: romboz 1s linear 0s forwards;
}


/*MOVIMIENTOS LATERALES DE LOS ROMBOS*/

@-webkit-keyframes primero {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(-316px);
		transform:translateX(-316px);
	}
}

@-moz-keyframes primero {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-838px);
		transform:translateX(-838px);
	}
}

@-o-keyframes primero {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(-316px);
		transform:translateX(-316px);
	}
}

@keyframes primero {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(-316px);
		-moz-transform:translateX(-838px);
		-o-transform:translateX(-316px);
		transform:translateX(-838px);
	}
}

.primero{
-webkit-animation: primero 3s linear 2s forwards;
-moz-animation: primero 3s linear 2s forwards;
-o-animation: primero 3s linear 2s forwards;
animation: primero 3s linear 2s forwards;
}

@-webkit-keyframes dos {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(-238px);
		transform:translateX(-238px);
	}
}

@-moz-keyframes dos {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-760px);
		transform:translateX(-760px);
	}
}

@-o-keyframes dos {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(-238px);
		transform:translateX(-238px);
	}
}

@keyframes dos {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(-238px);
		-moz-transform:translateX(-760px);
		-o-transform:translateX(-238px);
		transform:translateX(-760px);
	}
}

.dos{
-webkit-animation: dos 3s linear 2s forwards;
-moz-animation: dos 3s linear 2s forwards;
-o-animation: dos 3s linear 2s forwards;
animation: dos 3s linear 2s forwards;
}

@-webkit-keyframes tres {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(-156px);
		transform:translateX(-156px)
	}
}

@-moz-keyframes tres {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-678px);
		transform:translateX(-678px)
	}
}

@-o-keyframes tres {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(-156px);
		transform:translateX(-156px)
	}
}

@keyframes tres {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(-156px);
		-moz-transform:translateX(-678px);
		-o-transform:translateX(-156px);
		transform:translateX(-678px)
	}
}

.tres {
-webkit-animation: tres 3s linear 2s forwards;
-moz-animation: tres 3s linear 2s forwards;
-o-animation: tres 3s linear 2s forwards;
animation: tres 3s linear 2s forwards;
}

@-webkit-keyframes cuatro {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(-68px);
		transform:translateX(-68px);
	}
}

@-moz-keyframes cuatro {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-590px);
		transform:translateX(-590px);
	}
}

@-o-keyframes cuatro {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(-68px);
		transform:translateX(-68px);
	}
}

@keyframes cuatro {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(-68px);
		-moz-transform:translateX(-590px);
		-o-transform:translateX(-68px);
		transform:translateX(-590px);
	}
}

.cuatro {
-webkit-animation: cuatro 3s linear 2s forwards;
-moz-animation: cuatro 3s linear 2s forwards;
-o-animation: cuatro 3s linear 2s forwards;
animation: cuatro 3s linear 2s forwards;
}

@-webkit-keyframes seis {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(90px);
		transform:translateX(90px);
	}
}

@-moz-keyframes seis {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-432px);
		transform:translateX(-432px);
	}
}

@-o-keyframes seis {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(90px);
		transform:translateX(90px);
	}
}

@keyframes seis {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(90px);
		-moz-transform:translateX(-432px);
		-o-transform:translateX(90px);
		transform:translateX(-432px);
	}
}

.seis {
-webkit-animation: seis 3s linear 2s forwards;
-moz-animation: seis 3s linear 2s forwards;
-o-animation: seis 3s linear 2s forwards;
animation: seis 3s linear 2s forwards;
}

@-webkit-keyframes siete {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(172px);
		transform:translateX(172px);
	}
}

@-moz-keyframes siete {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-350px);
		transform:translateX(-350px);
	}
}

@-o-keyframes siete {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(172px);
		transform:translateX(172px);
	}
}

@keyframes siete {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(172px);
		-moz-transform:translateX(-350px);
		-o-transform:translateX(172px);
		transform:translateX(-350px);
	}
}

.siete {
-webkit-animation: siete 3s linear 2s forwards;
-moz-animation: siete 3s linear 2s forwards;
-o-animation: siete 3s linear 2s forwards;
animation: siete 3s linear 2s forwards;
}

@-webkit-keyframes ocho {
	0% {
		-webkit-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-webkit-transform:translateX(252px);
		transform:translateX(252px);
	}
}

@-moz-keyframes ocho {
	0% {
		-moz-transform:translateX(-522px);
		transform:translateX(-522px);
	}
	100% {
		-moz-transform:translateX(-270px);
		transform:translateX(-270px);
	}
}

@-o-keyframes ocho {
	0% {
		-o-transform:translateX(0px);
		transform:translateX(0px);
	}
	100% {
		-o-transform:translateX(252px);
		transform:translateX(252px);
	}
}

@keyframes ocho {
	0% {
		-webkit-transform:translateX(0px);
		-moz-transform:translateX(-522px);
		-o-transform:translateX(0px);
		transform:translateX(-522px);
	}
	100% {
		-webkit-transform:translateX(252px);
		-moz-transform:translateX(-270px);
		-o-transform:translateX(252px);
		transform:translateX(-270px);
	}
}

.ocho {
-webkit-animation: ocho 3s linear 2s forwards;
-moz-animation: ocho 3s linear 2s forwards;
-o-animation: ocho 3s linear 2s forwards;
animation: ocho 3s linear 2s forwards;
}

/*EYES SCALE*/

@-webkit-keyframes opacidad {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@-moz-keyframes opacidad {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@-o-keyframes opacidad {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes opacidad {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@-webkit-keyframes opacidadojos {
	0% {
		opacity:0;
	}
	100% {
		opacity:.7;
	}
}

@-moz-keyframes opacidadojos {
	0% {
		opacity:0;
	}
	100% {
		opacity:.7;
	}
}

@-o-keyframes opacidadojos {
	0% {
		opacity:0;
	}
	100% {
		opacity:.7;
	}
}

@keyframes opacidadojos {
	0% {
		opacity:0;
	}
	100% {
		opacity:.7;
	}
}

.fix-dos {
-moz-transform: translate(626px,245px);
-webkit-transform: translate(626px,245px);
}
.fix-dos circle {
-moz-transform: translate(-626px,-245px);
-webkit-transform: translate(626px,245px);
}

.ojos {
opacity:0;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: romboz 3s linear 5s forwards, opacidadojos 100ms linear 5s forwards;
-moz-animation: romboz 3s linear 5s forwards, opacidadojos 100ms linear 5s forwards;
-o-animation: romboz 3s linear 5s forwards, opacidadojos 100ms linear 5s forwards;
animation: romboz 3s linear 5s forwards, opacidadojos 100ms linear 5s forwards;
}

@-webkit-keyframes ampliaojo {
	0% {
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-webkit-transform:scale(1.4,1.4);
		transform:scale(1.4,1.4);
	}
}

@-moz-keyframes ampliaojo {
	0% {
		-moz-transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-moz-transform:scale(1.4,1.4) translate(-460px,-189.5px);
	}
}

@-o-keyframes ampliaojo {
	0% {
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-o-transform:scale(1.4,1.4);
		transform:scale(1.4,1.4);
	}
}

@keyframes ampliaojo {
	0% {
		-webkit-transform:scale(1,1);
		-moz-transform:scale(1,1) translate(-626px,-245px);
		-o-transform:scale(1,1);
		transform:scale(1,1)  translate(-626px,-245px);
	}
	100% {
		-webkit-transform:scale(1.4,1.4);
		-moz-transform:scale(1.4,1.4) translate(-460px,-189.5px);
		-o-transform:scale(1.4,1.4);
		transform:scale(1.4,1.4) translate(-460px,-189.5px);
	}
}


.eyescale {
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: ampliaojo 2s linear 9s forwards;
-moz-animation: ampliaojo 2s linear 9s forwards;
-o-animation: ampliaojo 2s linear 9s forwards;
animation: ampliaojo 2s linear 9s forwards;
}

@-webkit-keyframes ampliaojo2 {
	0% {
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-webkit-transform:scale(1.8,1.8);
		transform:scale(1.8,1.8);
	}
}

@-moz-keyframes ampliaojo2 {
	0% {
		-moz-transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-moz-transform:scale(1.8,1.8) translate(-368px,-158px);
	}
}

@-o-keyframes ampliaojo2 {
	0% {
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-o-transform:scale(1.8,1.8);
		transform:scale(1.8,1.8);
	}
}

@keyframes ampliaojo2 {
	0% {
		-webkit-transform:scale(1,1);
		-moz-transform:scale(1,1) translate(-626px,-245px);
		-o-transform:scale(1,1);
		transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-webkit-transform:scale(1.8,1.8);
		-moz-transform:scale(1.8,1.8) translate(-368px,-158px);
		-o-transform:scale(1.8,1.8);
		transform:scale(1.8,1.8) translate(-368px,-158px);
	}
}


.eyescale2 {
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: ampliaojo2 2s linear 9s forwards;
-moz-animation: ampliaojo2 2s linear 9s forwards;
-o-animation: ampliaojo2 2s linear 9s forwards;
animation: ampliaojo2 2s linear 9s forwards;
}

@-webkit-keyframes ampliaojo3 {
	0% {
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-webkit-transform:scale(2.2,2.2);
		transform:scale(2.2,2.2);
	}
}

@-moz-keyframes ampliaojo3 {
	0% {
		-moz-transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-moz-transform:scale(2.2,2.2) translate(-309px,-137px);
	}
}

@-o-keyframes ampliaojo3 {
	0% {
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-o-transform:scale(2.2,2.2);
		transform:scale(2.2,2.2);
	}
}

@keyframes ampliaojo3 {
	0% {
		-webkit-transform:scale(1,1);
		-moz-transform:scale(1,1) translate(-626px,-245px);
		-o-transform:scale(1,1);
		transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-webkit-transform:scale(2.2,2.2);
		-moz-transform:scale(2.2,2.2) translate(-309px,-137px);
		-o-transform:scale(2.2,2.2);
		transform:scale(2.2,2.2) translate(-309px,-137px);
	}
}


.eyescale3 {
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: ampliaojo3 2s linear 9s forwards;
-moz-animation: ampliaojo3 2s linear 9s forwards;
-o-animation: ampliaojo3 2s linear 9s forwards;
animation: ampliaojo3 2s linear 9s forwards;
}

@-webkit-keyframes ampliaojo4 {
	0% {
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-webkit-transform:scale(2.6,2.6);
		transform:scale(2.6,2.6);
	}
}

@-moz-keyframes ampliaojo4 {
	0% {
		-moz-transform:scale(1,1) translate(-626px,-245px);
  }
	100% {
		-moz-transform:scale(2.6,2.6) translate(-270px,-123px);
	}
}

@-o-keyframes ampliaojo4 {
	0% {
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	100% {
		-o-transform:scale(2.6,2.6);
		transform:scale(2.6,2.6);
	}
}

@keyframes ampliaojo4 {
	0% {
		-webkit-transform:scale(1,1);
		-moz-transform:scale(1,1) translate(-626px,-245px);
		-o-transform:scale(1,1);
		transform:scale(1,1) translate(-626px,-245px);
	}
	100% {
		-webkit-transform:scale(2.6,2.6);
		-moz-transform:scale(2.6,2.6) translate(-270px,-123px);
		-o-transform:scale(2.6,2.6);
		transform:scale(2.6,2.6) translate(-270px,-123px);
	}
}


.eyescale4 {
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: ampliaojo4 2s linear 9s forwards;
-moz-animation: ampliaojo4 2s linear 9s forwards;
-o-animation: ampliaojo4 2s linear 9s forwards;
animation: ampliaojo4 2s linear 9s forwards;
}


/*BORDEOJOS*/

@-webkit-keyframes bordeojos {
	0% {
		-webkit-transform:scale(0,0) translate(0px,0px);
		transform:scale(0,0) translate(0px,0px);
	}
	100% {
		-webkit-transform:scale(1,1) translate(5px,4px);
		transform:scale(1,1) translate(5px,4px);
	}
}

@-moz-keyframes bordeojos {
	0% {
		-moz-transform:scale(0,0) translate(-5px,-5px);
	}
	100% {
		-moz-transform:scale(1,1) translate(-3px,-3px);
	}
}

@-o-keyframes bordeojos {
	0% {
		-o-transform:scale(0,0) translate(0px,0px);
		transform:scale(0,0) translate(0px,0px);
	}
	100% {
		-o-transform:scale(1,1) translate(5px,4px);
		transform:scale(1,1) translate(5px,4px);
	}
}

@keyframes bordeojos {
	0% {
		-webkit-transform:scale(0,0) translate(0px,0px);
		-moz-transform:scale(0,0) translate(0px,0px);
		-o-transform:scale(0,0) translate(0px,0px);
		transform:scale(0,0) translate(0px,0px);
	}
	100% {
		-webkit-transform:scale(1,1) translate(5px,4px);
		-moz-transform:scale(1,1) translate(5px,4px);
		-o-transform:scale(1,1) translate(5px,4px);
		transform:scale(1,1) translate(5px,4px);
	}
}

.bordeojos {
opacity:0;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation: bordeojos 2s linear 11s forwards, opacidadojos 100ms linear 11s forwards;
-moz-animation: bordeojos 2s linear 11s forwards, opacidadojos 100ms linear 11s forwards;
-o-animation: bordeojos 2s linear 11s forwards, opacidadojos 100ms linear 11s forwards;
animation: bordeojos 2s linear 11s forwards, opacidadojos 100ms linear 11s forwards;
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console