<div class="wrapper">
		<div class="bubble">
				<div class="inner">
						<h1>Hello, World!</h1>
						<p>
								It's cool animation for you!
						</p>
				</div>
		</div>
</div>

.wrapper {
    position: absolute;;
    width: 100%;
    height: 100%;
    background-color: #333;
		background-image: url('http://pages.revox.io/frontend/1.1.0/html/02/assets/images/hero_g.jpg');
    overflow: hidden;
		background-position: center center;
		background-size: cover;
}

.bubble {
    position: absolute;
    top: 0%;
    left: -210%;
    width: 200%;
    height: 350%;
    background-color: rgba(140, 32, 129, 0.5);
    border-radius: 50%;
		animation: bubble .5s ease forwards;
    animation-delay: 1s;

    .inner {
        opacity: 0;
        position: absolute;
        right: 20%;
        top: 20%;
        width: 15%;
				animation: inner .5s ease forwards;
				animation-delay: 1.5s;

        h1, p {
            color: #fff;
            font-weight: 100;
        }
    }
}

@keyframes bubble {
	0% {
		top: 0%;
		left: -210%;
	}
	100% {
		top: -50%;
		left: -110%;
	}
}

@keyframes inner {
	0% {
		top: 20%;
		opacity: 0;
	}
	100% {
		top: 25%;
		opacity: 1;
	}
}

// $(document).ready(function() {
//     setTimeout(function() {
//         $('.bubble').css({
//             'top': '-50%',
//             'left': '-110%',
//         });
//         setTimeout(function() {
//             $('.bubble .inner').css({
//                 'top': '25%',
//                 'opacity': '1',
//             });
//         }, 500);
//     }, 300);
// });