<div class="full-baby-container">
	<div class="baby-container">
		<div class="baby-bottle-container">
			<div class="bottle">
				<div class="bottle-glass">
					<div class="bottle-measure"></div>
					<div class="bottle-measure"></div>
				</div>
				<div class="bottle-rim-chew"></div>
				<div class="bottle-rim-middle"></div>
				<div class="bottle-rim"></div>
			</div>
		</div>
		
		<div class="towel">
			<div class="towel-band"></div>
		</div>
		
		<div class="baby-head">
			<div class="baby-face">
				<div class="eyes">
					<div class="eye left-eye"></div>
					<div class="eye right-eye"></div>
				</div>
				<div class="mouth">
					<div class="left-mouth-part"></div>
					<div class="right-mouth-part"></div>
					<div class="mouth-tongue"></div>
				</div>

				<div class="chin"></div>

			</div>

			
			
			<div class="hair-container">
				<div class="panel-container" id="rotate-x">

					 <div class="flick-down"></div>
					 <div class="flick-up"></div>
					 <div class="flick-up-2"></div>
					 <div class="flick-up-2-round"></div>        
					 <div class="panel"></div>
				 </div>
			</div>
			
			
		</div>
		

	</div>
	
	<div class="baby-dummy-container">
		<div class="dummy-chew"></div>			
		<div class="baby-dummy-ring"></div>
		<div class="baby-dummy-base-bottom"></div>
		<div class="baby-dummy-base-middle"></div>
	</div>
	
</div>
@import "compass/css3";
// Variables
$bgColour: #86b1c2;
$white: #e8dcd8;
$skin: #f9c19f;
$blondeHair: #f5a11c;

body {
	padding: 0;
	margin: 0;
}
.full-baby-container {
	position: absolute;
	height: auto;
	min-height: 100vh;
	width: 100%;
	background-color: $bgColour;
	overflow-x: hidden;
}

.baby-container {
	position: relative;
	height: 530px;
	width: 220px;
	margin: auto;
	top: 10vh;
	@include transform(rotate(-39deg));
}
.towel {
	position: relative;
	top: 5%;
	height: 90%;
	width: 90%;
	background-color: $white;
	margin: auto;
	@include border-radius(500px);
	@include box-shadow(-25px -25px 0px rgba(0, 0, 0, 0.1));
@include animation-properties((animation: towel-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes towel-anim {
	0% {
		 left: -4%;
	}
	50% {
		 left: 4%;
	}
	100% {
		 left: -4%;
	}
}
.towel-band {
	position: absolute;
	height: 30px;
	width: 100%;
	top: 60%;
	background: #cdd3d7;
	@include animation-properties((animation: towel-band-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes towel-band-anim {
	0% {
		 @include transform(rotateY(0deg) skewY(-30deg));
		 top: 50%;
	}
	50% {
		 @include transform(rotateY(0deg) skewY(-30deg));
		 top: 54%;
	}
	100% {
		 @include transform(rotateY(0deg) skewY(-30deg));
		 top: 50%;
	}
}
	
.baby-face {
	position: absolute;
	height: 150px;
	width: 150px;
	background-color: $skin;
	top: 10%;
	left: 17%;
	@include border-radius(500px);
	@include animation-properties((animation: face-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes face-anim {
	0% {
		left: 7%;
		@include transform(rotateY(0deg));
	}
	20% {
		@include transform(rotateY(10deg));
	}
	50% {
		@include transform(rotateY(0deg));
		left: 27%;
	}
	60% {
		@include transform(rotateY(10deg));
	}
	100% {
		@include transform(rotateY(0deg));
		left: 7%;
	}
}



.blonde-hair {
	position: absolute;
	top: -8%;
	left: 17%;
	height: 30px;
	width: 70%;
	background-color: $blondeHair;
	margin: auto;
	@include border-top-left-radius(90px);
	@include border-bottom-left-radius(20px);	

}
.towel-bak {
	position: absolute;
	top: 10%;
	left: 17%;
	height: 30px;
	width: 60%;
	background-color: $white;
	margin: auto;
	@include border-top-left-radius(90px);
	@include border-top-right-radius(00px);	

}

.hair-containerd {
	position: absolute;
	top: 9.5%;
	left: 29%;
	height: 20px;
	width: 95px;
	@include border-top-left-radius(90px);
	@include border-top-right-radius(90px);	

}

.panel-container {
    width: 100%;
    height: 10px;
    border: 0px solid #CCC;
    margin: 0 0px;
    position: absolute;
    @include transform(perspective(1500px) skew(-29deg) rotate(-9deg));
    left: -1%;
    top: 9.1%;
}

#rotate-x .panel {
    background-size: 100%;
    background: #f5a11c;
    width: 87px;
    height: 100%;
    min-height: 42px;
    margin: auto;
    @include transform(perspective(2329px) rotateX(-45deg) translate3d(0px, 0px, 0px));
    @include border-top-left-radius(1258px);
    @include border-top-right-radius(1258px);
    @include border-bottom-left-radius(124px);
    @include border-bottom-right-radius(127px);
}
.flick-down {
    position: absolute;
    height: 30px;
    width: 87px;
    background-color: #f5a11c;
    left: 31%;
    top: 168%;
    @include transform(skew(-2deg));
    @include border-bottom-left-radius(100%);
    @include border-bottom-right-radius(100%);
    @include border-top-left-radius(67%);
    @include border-top-right-radius(67%);
}
.flick-up {
    position: absolute;
    height: 11px;
    width: 52px;
    background-color: #f5a11c;
    left: 56%;
    top: 198%;
    @include transform(skew(-37deg) rotate(20deg));
    @include border-top-right-radius(100%);
}
.flick-up-2 {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 48px 19px 16px;
    border-color: transparent transparent #f5a11c transparent;
    right: 16%;
    top: 230%;
    @include transform(rotate(180deg) skew(217deg));
}
.flick-up-2-round {
    position: absolute;
    height: 9px;
    width: 41px;
    background-color: #f5a11c;
    left: 62%;
    top: 277%;
    @include border-radius(100%);
    @include transform(rotate(29deg));
}

.eyes {
	position: absolute;
	height: 150px;
	width: 150px;
@include animation-properties((animation: eyes-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}

@keyframes eyes-anim {
	0% {
		 left: -8px;
	}
	50% {
		 left: 12px;
	}
	100% {
		 left: -8px;
	}
}
.eye {
	position: absolute;
	height: 20px;
	width: 20px;
	@include border-radius(100%);
	background: #1b414c;
	
}
.left-eye {
	top: 35%;
	left: 18%;
}
.right-eye {
	top: 35%;
	left: 68%;
}

.mouth {
    position: absolute;
    height: 70px;
    width: 70px;
    top: 55%;
    left: 35%;
}
.right-mouth-part {
    position: absolute;
    height: 35px;
    width: 50%;
    background: #7e2e33;
    margin: auto;
    float: left;
    top: 3px;
    left: 31px;
    @include transform(skewY(14deg) rotate(-13deg));
    @include border-top-left-radius(50%);
    @include border-bottom-left-radius(100%);
    @include border-top-right-radius(100%);
    @include border-bottom-right-radius(100%);
	@include animation-properties((animation: right-mouth, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}

@keyframes right-mouth {
	0% {
		 height: 30px;
		 width: 41%;
		 @include transform(skewY(11deg) rotate(-15deg));
		 top: 7px;
		 left: 15px;
		 @include border-top-left-radius(0%);
		 @include border-bottom-left-radius(100%);
		 @include border-top-right-radius(100%);
		 @include border-bottom-right-radius(100%);
	}
	50% {
		 height: 40px;
		 width: 62%;
		 background: #7e2e33;
		 margin: auto;
		 float: left;
		 top: -3px;
		 left: 18px;
		 @include transform(skewY(-11deg) rotate(-11deg));
		 @include border-top-left-radius(22%);
		 @include border-bottom-left-radius(102%);
		 @include border-top-right-radius(100%);
		 @include border-bottom-right-radius(70%);
	}
	100% {
		 height: 30px;
		 width: 41%;
		 @include transform(skewY(11deg) rotate(-11deg));
		 top: 7px;
		 left: 15px;
		@include border-top-left-radius(00%);
		@include border-bottom-left-radius(100%);
		@include border-top-right-radius(100%);
		@include border-bottom-right-radius(100%);
	}
}


.left-mouth-part {
	position: absolute;
	height: 30px;
	width: 50%;
	background: #7e2e33;	
	margin: auto;
	float: left;
	@include border-top-left-radius(100%);
	@include border-bottom-left-radius(100%);
	@include border-top-right-radius(50%);
	@include border-bottom-right-radius(50%);
	left: 10px;
	 @include animation-properties((animation: left-mouth, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));

}

@keyframes left-mouth {
	0% {
		 @include transform(skewY(11deg) rotate(-11deg));
		 top: 6px;
		 left: -3px;
		 @include border-top-left-radius(100%);
		 @include border-bottom-left-radius(100%);
		 @include border-top-right-radius(100%);
		 @include border-bottom-right-radius(100%);
	}
	50% {
		 height: 31px;
		 width: 61%;
		 background: #7e2e33;
		 margin: auto;
		 float: left;
		 top: 3px;
		 left: -11px;
		 @include transform(skewY(8deg) rotate(-7deg));
		 @include border-top-left-radius(100%);
		 @include border-bottom-left-radius(67%);
		 @include border-top-right-radius(100%);
		 @include border-bottom-right-radius(5%);
	}
	100% {
		 @include transform(skewY(11deg) rotate(-11deg));
		 top: 6px;
		 left: -3px;
		 @include border-top-left-radius(100%);
		 @include border-bottom-left-radius(100%);
		 @include border-top-right-radius(100%);
		 @include border-bottom-right-radius(100%);
	}
}

.mouth-tongue {
	position: absolute;
	height: 22px;
	width: 16px;
	background-color: #ed5c56;
	left: 15px;
	top: 14px;
	@include border-top-left-radius(100%);
	@include border-top-right-radius(100%);
	@include border-bottom-left-radius(40%);
	@include border-bottom-right-radius(30%);
	@include animation-properties((animation: mouth-tongue-anim, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}

@keyframes mouth-tongue-anim {
	0% {
		@include border-top-left-radius(50%);
		@include border-bottom-left-radius(0%);
		@include border-top-right-radius(100%);
		@include border-bottom-right-radius(0%);
		@include transform(skew(0deg));
		top: 13px;
	}
	50% {
		@include border-top-left-radius(100%);
		@include border-bottom-left-radius(0%);
		@include border-top-right-radius(50%);
		@include border-bottom-right-radius(0%);
		@include transform(skew(-12deg));
		top: 14px;
	}
	100% {
		@include border-top-left-radius(50%);
		@include border-bottom-left-radius(0%);
		@include border-top-right-radius(100%);
		@include border-bottom-right-radius(0%);
		@include transform(skew(0deg));
		top: 13px;
	}
}

.chin {
	position: absolute;
	width: 30px;
	height: 12px;
	background-color: #f9c19f;
	top: 77%;
	right: 40%;
	@include border-radius(100%);

}

.hair-container {
	position: relative;
	@include transform(rotate(0deg));
	top: -430px;
	@include animation-properties((animation: hair-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}

@keyframes hair-anim {
	0% {
		left: -25px;
		@include transform(rotateY(0deg));

	}
	10% {
		@include transform(rotateY(0deg));
	}
	50% {
		left: 23px;
		@include transform(rotateY(0deg));
	}
	60% {
		@include transform(rotateY(0deg));
	}
	100% {
		 left: -25px;
		@include transform(rotateY(0deg));
	}	
}
.baby-dummy-container  {
	position: relative;
	height: 100px;
	width: 100px;
	margin: auto;
	top: -78px;
	left: -212px;
}

.baby-dummy-ring {
	position: relative;
	height: 30px;
	width: 30px;
	margin: auto;
	border: 6px solid $blondeHair;
	@include border-radius(100%);
	top: 50%;
	@include box-shadow(-3px -2px 0px rgba(0, 0, 0, 0.1));
}

.baby-dummy-base-bottom {
	position: absolute;
	height: 25px;
	width: 20px;
	background: #7e2e33;
	@include border-radius(100%);
	top: 35px;
	left: 48px;
	@include box-shadow(-13px -12px 0px rgba(0, 0, 0, 0.1));
}
.baby-dummy-base-middle {
	position: absolute;
	height: 15px;
	width: 50px;
	background: #7e2e33;
	@include border-radius(500px);
	top: 30px;
	left: 37px;
	@include transform(rotate(20deg));
	@include box-shadow(-8px 0px 0px rgba(0, 0, 0, 0.1));
}
.dummy-chew {
    position: absolute;
    @include box-sizing(content-box);
    width: 29px;
    height: 24px;
    border: none;
    @include border-radius(80% 0 55% 50% / 55% 0 80% 50%);
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: black;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: $white;
    @include transform(rotate(136deg) skew(-35deg));
    left: 54px;
    top: 4px;
    @include box-shadow(9px 6px 0px rgba(0, 0, 0, 0.1));
}


.baby-bottle-container  {
	position: absolute;
	height: 100px;
	width: 150px;
	margin: auto;
	left: 310px;
	top: 140px;
	float: right;
	@include transform(rotate(22deg));
	@include transform-origin(100% 36%);
	@include animation-properties((animation: bottle-anim, animation-duration: 4s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}


@keyframes bottle-anim {

	50% {
		left: 305px;
		top: 165px;
		@include transform(rotate(0deg));
	}
	
}

.bottle-glass {
	position: absolute;
	height: 64px;
	width: 88px;
	background-color: #e8dcd8;
	margin: auto;
	top: 18px;
	right: 15px;
	@include border-top-right-radius(10px);
	@include border-bottom-right-radius(10px);
	@include box-shadow(1px -10px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim {
	position: absolute;
	height: 80px;
	width: 20px;
	background-color: #f3cf9f;
	margin: auto;
	top: 10px;
	right: 90px;
	@include border-radius(500px);
	@include box-shadow(0px -7px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim-middle {
	position: absolute;
	height: 60px;
	width: 31px;
	background-color: #f1b980;
	margin: auto;
	top: 20px;
	right: 95px;
	@include border-radius(100%);
	@include box-shadow(2px -10px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim-chew {
	position: absolute;
	height: 26px;
	width: 31px;
	background-color: #f1b980;
	margin: auto;
	top: 35px;
	right: 109px;
	@include border-radius(500px);
	@include box-shadow(-2px -7px 0px rgba(0, 0, 0, 0.05));
}
.bottle-measure {
    position: relative;
    height: 26px;
    width: 4px;
    background-color: #cdd3d7;
    float: left;
    margin-left: 10px;
    left: 14px;
    top: 6px;
    @include border-radius(500px);
	@include animation-properties((animation: bottle-measure-anim, animation-duration: 4s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}


@keyframes bottle-measure-anim {
	50% {
		top: 30px;
	}
}
View Compiled
// https://cameronfitzwilliam.com

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.