"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: