<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/OmarKhanfer/pen/jytck?depth=everything&order=popularity&page=33&q=animation&show_forks=false" />
<style class="cp-pen-styles">/* line 17, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* line 22, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}
/* line 24, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
/* line 26, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 28, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
/* line 30, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none;
}
/* line 103, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
/* line 32, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
/* line 116, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
/* line 40, ../sass/components/_layout.scss */
body {
position: relative;
}
/* line 44, ../sass/components/_layout.scss */
.cloud, .space, .ground {
position: relative;
}
/* line 48, ../sass/components/_layout.scss */
.cloud {
height: 120px;
z-index: 16;
}
/* line 53, ../sass/components/_layout.scss */
.space {
height: 354px;
position: relative;
z-index: 2;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZGFhNCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMzhiMzlmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA0ODlmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('https://omarkhanfer.github.io/CSS3Animation/images/../images/noise.png');
background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ebdaa4), color-stop(45%, #38b39f), color-stop(100%, #00489f)), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
background: -webkit-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
background: -moz-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
background: -o-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
background: linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
}
/* line 63, ../sass/components/_layout.scss */
.first-part {
bottom: 0px;
height: 387px;
position: absolute;
width: 50%;
left: 0;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* line 69, ../sass/components/_layout.scss */
.last-part {
bottom: 0px;
height: 387px;
position: absolute;
width: 50%;
right: 0;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* line 75, ../sass/components/_layout.scss */
.ground {
height: 330px;
position: relative;
z-index: 11;
}
/* line 15, ../sass/components/_header.scss */
.header {
background: #dff2f7;
height: 30px;
position: absolute;
width: 100%;
z-index: 20;
}
/* line 21, ../sass/components/_header.scss */
.header > div {
margin-bottom: 5px;
text-align: center;
}
/* line 25, ../sass/components/_header.scss */
.header .header__bar {
height: 10px;
background: #dff2f7;
padding: 0 20%;
text-align: left;
}
/* line 30, ../sass/components/_header.scss */
.header .header__bar .lang-en {
display: none;
}
/* line 34, ../sass/components/_header.scss */
.header .header__flag {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/flag.png") no-repeat transparent;
height: 19px;
margin: 0 10px 0 20%;
width: 19px;
float: left;
}
/* line 42, ../sass/components/_header.scss */
.header .header__text {
color: #929ea3;
font-size: 8px;
font-family: Lucida Sans Unicode;
padding-top: 5px;
}
/* line 48, ../sass/components/_header.scss */
.header .header__moon {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/moon.png");
height: 50px;
margin: 15px auto 10px;
width: 50px;
}
/* line 55, ../sass/components/_header.scss */
.header .header__sub-title {
color: #1a6cca;
font-family: 'Milonga', cursive;
font-size: 18px;
}
/* line 61, ../sass/components/_header.scss */
.header .header__title {
color: #4c79d6;
font-family: 'Cinzel Decorative', cursive;
font-size: 40px;
font-weight: bold;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,2px 2px 0 #0470bb;
}
/* line 69, ../sass/components/_header.scss */
.header .menu-button {
float: right;
}
/* line 33, ../sass/components/_hills.scss */
.first-hill {
z-index: 8;
background: url("https://omarkhanfer.github.io/CSS3Animation/images/hill.png") no-repeat;
bottom: 0;
height: 390px;
position: absolute;
width: 834px;
left: 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* line 546, ../sass/commons/_mixins.scss */
.first-hill else {
background-position: -20px 0;
}
/* line 42, ../sass/components/_hills.scss */
.last-hill {
z-index: 9;
background: url("https://omarkhanfer.github.io/CSS3Animation/images/hill.png") no-repeat;
bottom: 0;
height: 390px;
position: absolute;
width: 834px;
right: 0;
}
/* line 546, ../sass/commons/_mixins.scss */
.last-hill else {
background-position: -20px 0;
}
/* line 49, ../sass/components/_hills.scss */
.grace {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/grace.png") repeat-x transparent;
background-size: 100% 100%;
bottom: 0px;
height: 308px;
width: 100%;
position: absolute;
z-index: 20;
}
/* line 21, ../sass/components/_house.scss */
.house {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/house.png") no-repeat transparent;
height: 373px;
top: -100px;
position: absolute;
width: 288px;
z-index: 14;
left: 30%;
}
/* line 37, ../sass/components/_trees.scss */
.first-trees {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/trees.png") no-repeat transparent;
height: 178px;
position: absolute;
top: -100px;
width: 436px;
z-index: 6;
right: 10%;
}
/* line 42, ../sass/components/_trees.scss */
.last-trees {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/trees.png") no-repeat transparent;
height: 178px;
position: absolute;
top: -100px;
width: 436px;
z-index: 6;
left: 13%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* line 50, ../sass/components/_clouds.scss */
.larg-bubble {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/small-cloud.png") no-repeat transparent;
background-size: 100% 100%;
height: 27px;
position: absolute;
width: 36px;
right: 40%;
-webkit-animation: bubblemove 5s infinite linear;
-moz-animation: bubblemove 5s infinite linear;
-ms-animation: bubblemove 5s infinite linear;
animation: bubblemove 5s infinite linear;
}
/* line 55, ../sass/components/_clouds.scss */
.small-bubble {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/small-cloud.png") no-repeat transparent;
background-size: 100% 100%;
height: 27px;
position: absolute;
width: 36px;
right: 40%;
-webkit-animation: bubblemove 5s infinite linear -2s;
-moz-animation: bubblemove 5s infinite linear -2s;
-ms-animation: bubblemove 5s infinite linear -2s;
animation: bubblemove 5s infinite linear -2s;
}
/* line 60, ../sass/components/_clouds.scss */
.cloud__back {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/cloud.png") repeat-x transparent;
height: 228px;
position: absolute;
width: 100%;
top: 2px;
z-index: 18;
}
/* line 66, ../sass/components/_clouds.scss */
.cloud__front {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/cloud.png") repeat-x transparent;
height: 228px;
position: absolute;
width: 100%;
top: -12px;
z-index: 19;
}
/* line 72, ../sass/components/_clouds.scss */
.cloud__main {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/main-cloud.png") repeat-x transparent;
height: 248px;
position: absolute;
top: -5px;
width: 100%;
z-index: 16;
}
/* line 81, ../sass/components/_clouds.scss */
.blue-shadow {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/blue-shadow.png") no-repeat transparent;
height: 392px;
width: 1000px;
position: absolute;
top: 150px;
z-index: 8;
left: 13%;
}
/* line 94, ../sass/components/_clouds.scss */
.cloud .x1 {
-webkit-animation: cloudmove 3.5s infinite linear;
-moz-animation: cloudmove 3.5s infinite linear;
-ms-animation: cloudmove 3.5s infinite linear;
animation: cloudmove 3.5s infinite linear;
}
/* line 98, ../sass/components/_clouds.scss */
.cloud .x2 {
-webkit-animation: cloudmove 3s infinite linear;
-moz-animation: cloudmove 3s infinite linear;
-ms-animation: cloudmove 3s infinite linear;
animation: cloudmove 3s infinite linear;
}
/* line 102, ../sass/components/_clouds.scss */
.cloud .x3 {
-webkit-animation: cloudmove 2.5s infinite linear;
-moz-animation: cloudmove 2.5s infinite linear;
-ms-animation: cloudmove 2.5s infinite linear;
animation: cloudmove 2.5s infinite linear;
}
@-webkit-keyframes cloudmove {
/* line 110, ../sass/components/_clouds.scss */
0% {
background-position: -105px 0px;
}
/* line 113, ../sass/components/_clouds.scss */
100% {
background-position: -210px 0px;
}
}
@-moz-keyframes cloudmove {
/* line 110, ../sass/components/_clouds.scss */
0% {
background-position: -105px 0px;
}
/* line 113, ../sass/components/_clouds.scss */
100% {
background-position: -210px 0px;
}
}
@-ms-keyframes cloudmove {
/* line 110, ../sass/components/_clouds.scss */
0% {
background-position: -105px 0px;
}
/* line 113, ../sass/components/_clouds.scss */
100% {
background-position: -210px 0px;
}
}
@keyframes cloudmove {
/* line 110, ../sass/components/_clouds.scss */
0% {
background-position: -105px 0px;
}
/* line 113, ../sass/components/_clouds.scss */
100% {
background-position: -210px 0px;
}
}
@-webkit-keyframes bubblemove {
/* line 119, ../sass/components/_clouds.scss */
0% {
height: 24px;
top: 0px;
width: 32px;
right: 40%;
}
/* line 125, ../sass/components/_clouds.scss */
30% {
top: -25px;
}
/* line 127, ../sass/components/_clouds.scss */
100% {
height: 44px;
top: -150px;
width: 55px;
right: 45%;
}
}
@-moz-keyframes bubblemove {
/* line 119, ../sass/components/_clouds.scss */
0% {
height: 24px;
top: 0px;
width: 32px;
right: 40%;
}
/* line 125, ../sass/components/_clouds.scss */
30% {
top: -25px;
}
/* line 127, ../sass/components/_clouds.scss */
100% {
height: 44px;
top: -150px;
width: 55px;
right: 45%;
}
}
@-ms-keyframes bubblemove {
/* line 119, ../sass/components/_clouds.scss */
0% {
height: 24px;
top: 0px;
width: 32px;
right: 40%;
}
/* line 125, ../sass/components/_clouds.scss */
30% {
top: -25px;
}
/* line 127, ../sass/components/_clouds.scss */
100% {
height: 44px;
top: -150px;
width: 55px;
right: 45%;
}
}
@keyframes bubblemove {
/* line 119, ../sass/components/_clouds.scss */
0% {
height: 24px;
top: 0px;
width: 32px;
right: 40%;
}
/* line 125, ../sass/components/_clouds.scss */
30% {
top: -25px;
}
/* line 127, ../sass/components/_clouds.scss */
100% {
height: 44px;
top: -150px;
width: 55px;
right: 45%;
}
}
/* line 17, ../sass/components/_balloon.scss */
.balloon {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/balloon.png") no-repeat transparent;
height: 69px;
position: absolute;
top: -130px;
width: 49px;
z-index: 300;
-webkit-animation: balloonmove 15s infinite linear;
-moz-animation: balloonmove 15s infinite linear;
-ms-animation: balloonmove 15s infinite linear;
animation: balloonmove 15s infinite linear;
left: 500px;
}
@-webkit-keyframes balloonmove {
/* line 32, ../sass/components/_balloon.scss */
0% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 33, ../sass/components/_balloon.scss */
15% {
top: -180px;
left: 460px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 34, ../sass/components/_balloon.scss */
30% {
top: -220px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 35, ../sass/components/_balloon.scss */
45% {
top: -260px;
left: 500px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
/* line 36, ../sass/components/_balloon.scss */
60% {
top: -220px;
left: 520px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 37, ../sass/components/_balloon.scss */
75% {
top: -180px;
left: 530px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 38, ../sass/components/_balloon.scss */
90% {
top: -160px;
left: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 39, ../sass/components/_balloon.scss */
100% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes balloonmove {
/* line 32, ../sass/components/_balloon.scss */
0% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 33, ../sass/components/_balloon.scss */
15% {
top: -180px;
left: 460px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 34, ../sass/components/_balloon.scss */
30% {
top: -220px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 35, ../sass/components/_balloon.scss */
45% {
top: -260px;
left: 500px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
/* line 36, ../sass/components/_balloon.scss */
60% {
top: -220px;
left: 520px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 37, ../sass/components/_balloon.scss */
75% {
top: -180px;
left: 530px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 38, ../sass/components/_balloon.scss */
90% {
top: -160px;
left: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 39, ../sass/components/_balloon.scss */
100% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-ms-keyframes balloonmove {
/* line 32, ../sass/components/_balloon.scss */
0% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 33, ../sass/components/_balloon.scss */
15% {
top: -180px;
left: 460px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 34, ../sass/components/_balloon.scss */
30% {
top: -220px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 35, ../sass/components/_balloon.scss */
45% {
top: -260px;
left: 500px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
/* line 36, ../sass/components/_balloon.scss */
60% {
top: -220px;
left: 520px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 37, ../sass/components/_balloon.scss */
75% {
top: -180px;
left: 530px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 38, ../sass/components/_balloon.scss */
90% {
top: -160px;
left: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 39, ../sass/components/_balloon.scss */
100% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes balloonmove {
/* line 32, ../sass/components/_balloon.scss */
0% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 33, ../sass/components/_balloon.scss */
15% {
top: -180px;
left: 460px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 34, ../sass/components/_balloon.scss */
30% {
top: -220px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 35, ../sass/components/_balloon.scss */
45% {
top: -260px;
left: 500px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
/* line 36, ../sass/components/_balloon.scss */
60% {
top: -220px;
left: 520px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 37, ../sass/components/_balloon.scss */
75% {
top: -180px;
left: 530px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
/* line 38, ../sass/components/_balloon.scss */
90% {
top: -160px;
left: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 39, ../sass/components/_balloon.scss */
100% {
top: -140px;
left: 480px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* line 17, ../sass/components/_snake.scss */
.snake {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/snake.png");
height: 188px;
position: absolute;
top: 100px;
width: 188px;
z-index: 17;
-webkit-animation: snakemove 8s infinite linear;
-moz-animation: snakemove 8s infinite linear;
-ms-animation: snakemove 8s infinite linear;
animation: snakemove 8s infinite linear;
left: 24%;
}
@-webkit-keyframes snakemove {
/* line 33, ../sass/components/_snake.scss */
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 34, ../sass/components/_snake.scss */
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes snakemove {
/* line 33, ../sass/components/_snake.scss */
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 34, ../sass/components/_snake.scss */
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes snakemove {
/* line 33, ../sass/components/_snake.scss */
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 34, ../sass/components/_snake.scss */
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes snakemove {
/* line 33, ../sass/components/_snake.scss */
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 34, ../sass/components/_snake.scss */
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* line 17, ../sass/components/_stars.scss */
.stars {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/stars.png") no-repeat transparent;
height: 124px;
margin: 0 auto;
position: absolute;
top: 240px;
width: 820px;
z-index: 10;
left: 18%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}
/* line 16, ../sass/components/_mountain.scss */
.mountain {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/mountain.png") no-repeat transparent;
height: 188px;
position: absolute;
top: -145px;
width: 282px;
z-index: 3;
left: 19%;
}
/* line 18, ../sass/components/_lighting.scss */
.yellow-lighting {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/yellow-lighting.png") no-repeat transparent;
height: 500px;
position: absolute;
top: -215px;
width: 500px;
z-index: 5;
right: 47%;
}
/* line 28, ../sass/components/_lighting.scss */
.light-stripes {
background: url("https://omarkhanfer.github.io/CSS3Animation/images/light-stripes.png") no-repeat transparent;
height: 692px;
position: absolute;
top: 100px;
width: 970px;
z-index: 11;
left: 16%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
}
/* line 88, ../sass/ui/_popup.scss */
.popup {
height: 260px;
width: 328px;
z-index: 100;
background-color: rgba(19, 108, 148, 0.7);
border: 1px solid #fff;
position: absolute;
top: 238px;
z-index: 15;
-webkit-box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
-moz-box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
left: 38%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
border-radius: 30px;
}
/* line 42, ../sass/ui/_popup.scss */
.popup .popup__inner {
display: block;
height: 100%;
width: 100%;
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
-khtml-border-radius: inherit;
border-radius: inherit;
-webkit-box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
}
/* line 54, ../sass/ui/_popup.scss */
.popup .popup__title {
color: #02203c;
display: block;
font-family: Georgia;
font-size: 18px;
font-style: italic;
padding: 20px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* line 66, ../sass/ui/_popup.scss */
.popup .popup__sub-title {
color: #fff;
font-family: Georgia;
font-size: 15px;
padding: 0 40px;
text-align: center;
text-shadow: 0 1px #004261;
}
/* line 75, ../sass/ui/_popup.scss */
.popup .popup__divider {
border-top: 1px solid rgba(204, 204, 204, 0.6);
height: 1px;
margin: 15px auto;
width: 60%;
}
/* line 63, ../sass/ui/_buttons.scss */
.blue-button {
border: 1px solid;
color: #fff;
display: block;
font-family: milonga;
font-size: 17px;
margin: 10px 35px;
padding: 7px 10px;
text-align: center;
text-shadow: 0 1px rgba(159, 45, 66, 0.6);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-color: #005b76;
-webkit-box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
-moz-box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE1ODFhMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ3YjVkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1581a0), color-stop(100%, #47b5d9));
background: -webkit-linear-gradient(#1581a0, #47b5d9);
background: -moz-linear-gradient(#1581a0, #47b5d9);
background: -o-linear-gradient(#1581a0, #47b5d9);
background: linear-gradient(#1581a0, #47b5d9);
}
/* line 31, ../sass/ui/_buttons.scss */
.blue-button:hover, .blue-button:active {
cursor: pointer;
}
/* line 35, ../sass/ui/_buttons.scss */
.blue-button:active {
color: #eee;
padding: 7px 11px 7px 9px;
-webkit-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
-moz-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
}
/* line 71, ../sass/ui/_buttons.scss */
.red-button {
border: 1px solid;
color: #fff;
display: block;
font-family: milonga;
font-size: 17px;
margin: 10px 35px;
padding: 7px 10px;
text-align: center;
text-shadow: 0 1px rgba(159, 45, 66, 0.6);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-color: #872235;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2MjYzYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M0NDE1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #96263b), color-stop(100%, #c44159));
background: -webkit-linear-gradient(#96263b, #c44159);
background: -moz-linear-gradient(#96263b, #c44159);
background: -o-linear-gradient(#96263b, #c44159);
background: linear-gradient(#96263b, #c44159);
-webkit-box-shadow: 0 2px rgba(160, 44, 65, 0.6);
-moz-box-shadow: 0 2px rgba(160, 44, 65, 0.6);
box-shadow: 0 2px rgba(160, 44, 65, 0.6);
}
/* line 31, ../sass/ui/_buttons.scss */
.red-button:hover, .red-button:active {
cursor: pointer;
}
/* line 35, ../sass/ui/_buttons.scss */
.red-button:active {
color: #eee;
padding: 7px 11px 7px 9px;
-webkit-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
-moz-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
}
/* line 79, ../sass/ui/_buttons.scss */
.menu-button {
border: 1px solid #340b0b;
color: #fff;
display: inline;
padding: 5px 10px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk0MmEzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IxNTY1MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #942a31), color-stop(100%, #b15653));
background: -webkit-linear-gradient(#942a31, #b15653);
background: -moz-linear-gradient(#942a31, #b15653);
background: -o-linear-gradient(#942a31, #b15653);
background: linear-gradient(#942a31, #b15653);
-webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
-moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* line 51, ../sass/ui/_buttons.scss */
.menu-button:hover {
background: #b1474e;
cursor: pointer;
}
/* line 55, ../sass/ui/_buttons.scss */
.menu-button:active {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
}
/* line 36, ../sass/edit/_stylesheet.scss */
.hide {
display: none;
}
/* line 40, ../sass/edit/_stylesheet.scss */
.show {
display: block;
}
.blog-link {
line-height:30px;
color:#1A6CCA;
text-decoration:none;
}
.blog-link:hover {
text-decoration:underline;
color:#5AaCAA;
}</style></head><body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="main-container" style="max-width:1300px">
<div class="cloud">
<div class="header">
<div class="header__bar">
<div class="lang-ar menu-button" style="display:none">عربي</div>
<div class="lang-en menu-button">English</div>
<div class="header__text" style="display:none"><span class="header__flag"></span>du: 1 level credit for 3 AED, max 3 times per week. Etisalat: 10 level credits for just 30 AED.</div>
</div>
<div class="header__moon">
</div>
<div class="header__sub-title">Thank you for visiting my pen<br><a class="blog-link" href="https://omaraljaber.wordpress.com">omaraljaber.wordpress.com</a></div>
<div class="header__title">VIDEO OF YOUR DREAMS</div>
</div>
<div class="x3 cloud__front"></div>
<div class="x2 cloud__back"></div>
<div class="snake"></div>
<div class="x1 cloud__main"></div>
</div>
<div>
<div class="light-stripes"></div>
<div class="space"></div>
<div class="stars"></div>
<div class="blue-shadow"></div>
<div class="popup" style="display:none">
<div class="popup__inner">
<div class="dialog-1">
<div class="popup__title">Question 1 of 3</div>
<div class="popup__sub-title">
What was the last thing you did
before you went to sleep last night?
</div>
<div class="popup__divider"></div>
<div class="blue-button">Surf the Net</div>
<div class="blue-button">Watch TV</div>
<div class="blue-button">Talk on the phone</div>
</div>
</div>
</div>
</div>
<div class="ground">
<div class="first-part">
<div class="first-hill"></div>
<div class="first-trees"></div>
<div class="mountain"></div>
</div>
<div class="last-part">
<div class="last-hill">
<div class="house">
<div class="larg-bubble"></div>
<div class="small-bubble"></div>
</div>
<div class="balloon"></div>
</div>
<div class="last-trees"></div>
<div class="yellow-lighting"></div>
</div>
<div class="grace"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>') </script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body></html>
