startv

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
via CSS Lint

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
via JS Hint

Code Indentation

     

Save Automatically?

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

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <div class="banner">
		<div class="frame1">
			<p class="text p1">Conheça o programa que vai ajudar você a anunciar seus clientes no <span class="span">Google</span></p>
		</div>
		<div class="frame2">
			<div class="plataforma"></div>
			<p class="adword">
				<span class="adwords ar -deg">A</span>
				<span class="adwords ds deg">D</span>
				<span class="adwords wd">W</span>
				<span class="adwords o -deg">O</span>
				<span class="adwords ar -deg">R</span>
				<span class="adwords wd deg">D</span>
				<span class="adwords ds">S</span>
			</p>
			<div class="cifrao">
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
			</div>
			<div class="processor"></div>
			<div class="sistema">
				<div class="boxleft"></div>
				<div class="gear-large">
					<div class="gear-large-in"></div>
				</div>
				<div class="gear-small">
					<div class="gear-small-in"></div>
				</div>
				<div class="pistao">
					<div class="pistaotop"></div>
					<div class="pistao-in"></div>
				</div>
			</div>
		</div>
		<div class="frame3">
			<p class="text p3">Aprenda mais sobre <span class="span">AdWords</span> e aproveite os beneficios:</p>
			<p class="text p3">Treinamento em AdWords . Certificação Google . Recompensas reais e virtuais</p>
		</div>
		<div class="frame4">
			<p class="google"><span class="Gg">G</span><span class="oe">o</span><span class="_o">o</span><span class="Gg">g</span><span class="_l">l</span><span class="oe">e</span> <span class="span engage">Engage</span></p>
			<p class="text p4">Transformando palavras em bons negócios</p>
			<button class="button">Clique aqui e participe</button>
		</div>


		<div class="colors blue"></div>
		<div class="colors red"></div>
		<div class="colors yellow"></div>
		<div class="colors green"></div>
	</div>
            
          
!

CSS

            
              /****
https://developer.mozilla.org/pt-PT/demos/detail/banner-google-engage-css


 Banner Google Engage CSS - only chrome


****/



@keyframes "frame1" {
 from {
    top: 0;
 }
 to {
    top: -55px;
 }

}

@-moz-keyframes frame1 {
 from {
   top: 0;
 }
 to {
   top: -55px;
 }

}

@-webkit-keyframes "frame1" {
 from {
   top: 0;
 }
 to {
   top: -55px;
 }

}

@keyframes "frame2" {
 from {
    top: 90px;
 }
 to {
    top: -7px;
 }

}

@-moz-keyframes frame2 {
 from {
   top: 90px;
 }
 to {
   top: -7px;
 }

}

@-webkit-keyframes "frame2" {
 from {
   top: 90px;
 }
 to {
   top: -7px;
 }

}

@keyframes "frame2-1" {
 from {
    top: -7px;
 }
 to {
    top: 90px;
 }

}

@-moz-keyframes frame2-1 {
 from {
   top: -7px;
 }
 to {
   top: 90px;
 }

}

@-webkit-keyframes "frame2-1" {
 from {
   top: -7px;
 }
 to {
   top: 90px;
 }

}

@keyframes "frame3" {
 from {
    top: -75px;
 }
 to {
    top: 0;
 }

}

@-moz-keyframes frame3 {
 from {
   top: -75px;
 }
 to {
   top: 0;
 }

}

@-webkit-keyframes "frame3" {
 from {
   top: -75px;
 }
 to {
   top: 0;
 }

}
@keyframes "frame3-1" {
 from {
    top: 0;
 }
 to {
    top: 75px;
 }

}

@-moz-keyframes frame3-1 {
 from {
   top: 0;
 }
 to {
   top: 75px;
 }

}

@-webkit-keyframes "frame3-1" {
 from {
   top: 0;
 }
 to {
   top: 75px;
 }

}
@keyframes "frame4" {
 from {
   	opacity: 0;
 }
 to {
   	opacity: 1;
 }

}

@-moz-keyframes frame4 {
 from {
   
   opacity: 0;
 }
 to {
   
   opacity: 1;
 }

}

@-webkit-keyframes "frame4" {
 from {
   
   opacity: 0;
 }
 to {
   
   opacity: 1;
 }

}

@keyframes "gearlarge" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(360deg);
   	-moz-transform: rotate(360deg);
   	transform: rotate(360deg);
 }

}

@-moz-keyframes gearlarge {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "gearlarge" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@keyframes "gearsmall" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(-360deg);
   	-moz-transform: rotate(-360deg);
   	transform: rotate(-360deg);
 }

}

@-moz-keyframes gearsmall {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }

}

@-webkit-keyframes "gearsmall" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }

}

@keyframes "pistao-top" {
 from {
    top: 4;
 }
 to {
    top: 24px;
 }

}

@-moz-keyframes pistao-top {
 from {
   top: 4;
 }
 to {
   top: 24px;
 }

}

@-webkit-keyframes "pistao-top" {
 from {
   top: 4;
 }
 to {
   top: 24px;
 }

}

@keyframes "pistao-in" {
 from {
    top: 12;
 }
 to {
    top: 32px;
 }

}

@-moz-keyframes pistao-in {
 from {
   top: 12;
 }
 to {
   top: 32px;
 }

}

@-webkit-keyframes "pistao-in" {
 from {
   top: 12;
 }
 to {
   top: 32px;
 }

}

@keyframes "adword" {
 from {
    left: 65px;
 }
 to {
    left: 290px;
 }

}

@-moz-keyframes adword {
 from {
   left: 65px;
 }
 to {
   left: 290px;
 }

}

@-webkit-keyframes "adword" {
 from {
   left: 65px;
 }
 to {
   left: 290px;
 }

}

@keyframes "cifrao" {
 from {
    right: 266px;
 }
 to {
    right: 80px;
 }

}

@-moz-keyframes cifrao {
 from {
   right: 266px;
 }
 to {
   right: 80px;
 }

}

@-webkit-keyframes "cifrao" {
 from {
   right: 266px;
 }
 to {
   right: 80px;
 }

}

@keyframes "cif-1" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(350deg);
   	-moz-transform: rotate(350deg);
   	-o-transform: rotate(350deg);
   	transform: rotate(350deg);
 }

}

@-moz-keyframes cif-1 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(350deg);
   transform: rotate(350deg);
 }

}

@-webkit-keyframes "cif-1" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(350deg);
   transform: rotate(350deg);
 }

}

@keyframes "cif-2_5" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(370deg);
   	-moz-transform: rotate(370deg);
   	-o-transform: rotate(370deg);
   	transform: rotate(370deg);
 }

}

@-moz-keyframes cif-2_5 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(370deg);
   transform: rotate(370deg);
 }

}

@-webkit-keyframes "cif-2_5" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(370deg);
   transform: rotate(370deg);
 }

}
@keyframes "cif-3" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(380deg);
   	-moz-transform: rotate(380deg);
   	-o-transform: rotate(380deg);
   	transform: rotate(380deg);
 }

}

@-moz-keyframes cif-3 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(380deg);
   transform: rotate(380deg);
 }

}

@-webkit-keyframes "cif-3" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(380deg);
   transform: rotate(380deg);
 }

}

@keyframes "cif-4" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(340deg);
   	-moz-transform: rotate(340deg);
   	-o-transform: rotate(340deg);
   	transform: rotate(340deg);
 }

}

@-moz-keyframes cif-4 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(340deg);
   transform: rotate(340deg);
 }

}

@-webkit-keyframes "cif-4" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(340deg);
   transform: rotate(340deg);
 }

}

@keyframes "google" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes google {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "google" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes "p4" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes p4 {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "p4" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes "button" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes button {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "button" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

body {
  margin: 0;
  padding: 0;
}
.banner {
  font-family: Verdana, sans-serif;
  position: relative;
  width: 728px;
  height: 90px;
  margin: 10% auto;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: -webkit-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  background: -moz-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  background: radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
}
.colors {
  position: absolute;
  bottom: 0;
  width: 181.5px;
  height: 4px;
  z-index: 10;
}
.blue {
  background: blue;
  left: 0;
}
.red {
  background: red;
  left: 181px;
}
.yellow {
  background: yellow;
  left: 363px;
}
.green {
  background: green;
  right: 0;
}
.frame1 {
  position: relative;
  top: 0;
  -webkit-animation: frame1 500ms linear 3s forwards;
  -moz-animation: frame1 500ms linear 3s forwards;
  animation: frame1 500ms linear 3s forwards;
}
.text {
  color: #63b9d7;
  text-align: center;
}
.p1 {
  font-size: 17px;
  line-height: 45px;
}
.span {
  color: #222;
}
.frame2 {
  position: relative;
  top: 90px;
  -webkit-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
  -moz-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
  animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
}
.plataforma {
  position: relative;
  width: 678px;
  height: 12px;
  border-radius: 10px;
  background-color: #3399cc;
  background-image: -webkit-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: -moz-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);

-webkit-background-size: 45px 12px;
-moz-background-size: 45px 12px;
background-size: 45px 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-bottom: none;
  margin: 0 auto;
}
.adword {
  position: relative;
  margin-top: -50px;
  left: 65px;
  float: left;
  -webkit-animation: adword 1500ms linear 4s forwards;
  -moz-animation: adword 1500ms linear 4s forwards;
  animation: adword 1500ms linear 4s forwards;
}
.adwords {
  display: block;
  float: left;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -1px;
  position: relative;
  top: 14px;
}
.ar {
  color: red;
  top: 13px;
}
.ds {
  color: #ff9900;
}
.wd {
  color: #56ab52;
}
.o {
  color: #3399cc;
}
.-deg {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.deg {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}
.cifrao {
  position: absolute;
  top: -50px;
  right: 266px;
  -webkit-animation: cifrao 1s linear 5s forwards;
  -moz-animation: cifrao 1200ms linear 5s forwards;
  animation: cifrao 1200ms linear 5s forwards;
}
.cif {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border: solid 2px black;
  border-radius: 50%;
  background: #3399cc;
  box-shadow: 0 0 0 2px #3399cc;
  color: white;
  text-align: center;
  font-family: 'Arial';
  font-size: 22px;
  line-height: 22px;
}
.cif:first-child {
  -webkit-animation: cif-1 1s ease-in-out 5500ms forwards;
	-moz-animation: cif-1 1s ease-in-out 5500ms forwards;
	animation: cif-1 1s ease-in-out 5500ms forwards;
}
.cif:nth-child(2) {
  -webkit-animation: cif-2_5 1s ease-in-out 5400ms forwards;
	-moz-animation: cif-2_5 1s ease-in-out 5400ms forwards;
	animation: cif-2_5 1s ease-in-out 5400ms forwards;
}
.cif:nth-child(3) {
  -webkit-animation: cif-3 1s ease-in-out 5300ms forwards;
	-moz-animation: cif-3 1s ease-in-out 5300ms forwards;
	animation: cif-3 1s ease-in-out 5300ms forwards;
}
.cif:nth-child(4) {
  -webkit-animation: cif-4 1100ms ease-in-out 5200ms forwards;
	-moz-animation: cif-4 1100ms ease-in-out 5200ms forwards;
	animation: cif-4 1100ms ease-in-out 5200ms forwards;
}
.cif:last-child {
  -webkit-animation: cif-2_5 1100ms ease-in 5s forwards;
  -moz-animation: cif-2_5 1100ms ease-in 5s forwards;
  animation: cif-2_5 1100ms ease-in 5s forwards;
}
.processor {
  position: relative;
  top: -47px;
  width: 200px;
  height: 35px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-top-left-radius: 40px 8px;
  border-top-right-radius: 13px 5px;
}
.processor:after {
  position: absolute;
  top: -1px;
  left: 17px;
  content: "";
  width: 163px;
  height: 35px;
  background-color: gray;
  border: 1px solid #D4D4D4;
  border-bottom: none;
}
.sistema {
  position: relative;
  top: -102px;
  width: 155px;
  height: 66px;
  margin: 0 auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: none;
  background-color: #3399cc;
}
.sistema:before {
  position: absolute;
  top: 6px;
  left: 77px;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: solid 3px white;
  z-index: 9;
}
.sistema:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 92px;
  width: 4px;
  height: 12px;
  background-color: white;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
  z-index: 9;
}
.boxleft {
  position: relative;
  top: 25px;
  width: 20px;
  height: 40px;
  border-top: solid 1px #c7c9c8;
  border-right: solid 1px #c7c9c8;
}
.boxleft:after {
  position: absolute;
  top: 8px;
  left: 3px;
  content: "";
  width: 10px;
  height: 10px;
  background-color: black;
  box-shadow: 0 7px 0 #3399cc, 0 8px 0 #c7c9c8, 0 9px 0 #3399cc, 0 10px 0 #c7c9c8, 0 11px 0 #3399cc, 0 12px 0 #c7c9c8, 0 13px 0 #3399cc, 0 14px 0 #c7c9c8, 0 15px 0 #3399cc, 0 16px 0 #c7c9c8, 0 17px 0 #3399cc, 0 18px 0 #c7c9c8, 0 19px 0 #3399cc, 0 20px 0 #c7c9c8;
}
.boxleft:before {
  position: absolute;
  top: -18px;
  left: 20px;
  content: "";
  height: 18px;
  border-right: solid 1px #c7c9c8;
  box-shadow: 80px 40px 0 #c7c9c8;
}
.gear-large {
  position: relative;
  top: -55px;
  left: 10px;
  width: 65px;
  height: 65px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #c7c9c8;
  z-index: 2;
  -webkit-animation: gearlarge 4s linear infinite;
  -moz-animation: gearlarge 4s linear infinite;
  animation: gearlarge 4s linear infinite;
}
.gear-large-in {
  position: relative;
  top: 4px;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  border: dotted 5px #0e4c7c;
}
.gear-large-in:after {
  position: absolute;
  top: 0;
  content: "";
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background-color: #0e4c7c;
  border-radius: 50%;
}
.search:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  width: 4px;
  height: 12px;
  background-color: white;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.gear-small {
  position: relative;
  top: -87px;
  left: -32px;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  z-index: 5;
  -webkit-animation: gearsmall 3s linear infinite;
  -moz-animation: gearsmall 3s linear infinite;
  animation: gearsmall 3s linear infinite;
}
.gear-small-in {
  position: relative;
  top: 3px;
  width: 29px;
  height: 29px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  border: dotted 5px white;
  z-index: 9;
}
.gear-small-in:after {
  position: absolute;
  content: "";
  width: 29px;
  height: 29px;
  margin: 0 auto;
  background: #ffffff -webkit-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff -moz-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);

  border-radius: 50%;
}
.pistao {
  position: relative;
  top: -151px;
  left: 50px;
  width: 23px;
  height: 66px;
  margin: 0 auto;
  background-color: white;
  border-top: solid 4px black;
}
.pistao:after {
  content: "";
  position: absolute;
  top: 53px;
  left: -95px;
  width: 79px;
  border-bottom: solid 1px #c7c9c8;
}
.pistao:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 23px;
  width: 16px;
  border-bottom: solid 1px #c7c9c8;
}
.pistaotop {
  position: relative;
  top: 4px;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid #000;
  -webkit-animation: pistao-top 350ms linear alternate infinite;
  -moz-animation: pistao-top 350ms linear alternate infinite;
  animation: pistao-top 350ms linear alternate infinite;
}
.pistaotop:after {
  position: absolute;
  top: 9px;
  left: 4px;
  content: "";
  width: 2px;
  height: 10px;
  background-color: black;
}
.pistao-in {
  position: relative;
  top: 12px;
  width: 15px;
  height: 38px;
  margin: 0px auto;
  background-color: #ff9900;
  -webkit-animation: pistao-in 350ms linear alternate infinite;
  -moz-animation: pistao-in 350ms linear alternate infinite;
  animation: pistao-in 350ms linear alternate infinite;
}
.frame3 {
  position: absolute;
  top: -75px;
  width: 726px;
  -webkit-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
  -moz-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
  animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
}
.p3 {
  font-size: 17px;
  line-height: 10px;
}
.frame4 {
  position: absolute;
  top: 0;
  width: 726px;
  padding: 0 10px 0 25px;
  opacity: 0;
  -webkit-animation: frame4 100ms linear 11s forwards;
  -moz-animation: frame4 100ms linear 11s forwards;
  animation: frame4 100ms linear 11s forwards;
}
.google {
  font-family: Times, serif;
  font-size: 35px;
  line-height: 10px;
  float: left;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: google 500ms ease-in-out 11s forwards;
  -moz-animation: google 500ms ease-in-out 11s forwards;
  animation: google 500ms ease-in-out 11s forwards;
}
.Gg {
  color: #3399cc;
}
.oe {
  color: #ea325b;
}
._o {
  color: #fcc547;
}
._l {
  color: #56ab52;
}
.engage {
  font-family: Arial, sans-serif;
  color: #726C6E;
  font-size: 26px;
}
.p4 {
  padding-top: 10px;
  font-size: 16px;
  width: 221px;
  text-align: left;
  float: left;
  margin-left: 20px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: p4 500ms ease-in-out 11500ms forwards;
  -moz-animation: p4 500ms ease-in-out 11500ms forwards;
  animation: p4 500ms ease-in-out 11500ms forwards;
}
.button {
  width: 181px;
  height: 32px;
  float: left;
  margin: 28px 0 0 45px;
  background: #5086E0;
  color: white;
  font-size: 15px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
  -moz-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
  animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
}
            
          
!

JS

            
              //outdated 
            
          
!
999px
Loading ..................

Console