CSS Challenge Day 058

css-challenge-day-058.markdown

CSS Challenge Day 058

Took me all night just to figure out the animation on this one. This is my beehive. CSS Challenge Day 58. Quite frustrating to code.

A Pen by Paul on CodePen.

License.

index.pug

.frame
	.center
		.beehive
			-for(var i=1; i < 20; i++) {
				div(class="slice slice-"+i)
			-}

script.js

// jQuery v3.3.1 is supported

scripts

<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>

style.scss

// delete the following line if no text is used
// edit the line if you wanna use other fonts
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

$radius: 200;
$speed: 6s;
$fill: #FBC02D;

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #FF0099;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	perspective: 350px;
}

.beehive {
	width: $radius+px;
	height: $radius+px;
	transform-style: preserve-3d;
	transform: rotateX(-25deg) rotateZ(-25deg);
	transition: all 1s ease-in-out;
	
	&:hover {
		transform: rotateX(25deg) rotateZ(0deg);
	}
	
	.slice {
		position: absolute;
		box-sizing: border-box;
		background: $fill;
		border-radius: 50%;
		border: 2px solid #D500F9;
		opacity: 0.7;
		transition: all 1s ease-in-out;
		
		&-19 {
			width: $radius+px;
			height: $radius+px;
			transform: rotateX(90deg);
			animation: initiateSlice $speed ease-in-out infinite;
		}
	}
	
	@for $i from 1 through 9 {
		$size: ($radius - (2 * ($i*$i)));
		$offset: (($i * 16) - (($i*$i) / 2));
		$topSlices: $i + 9;
		
		.slice-#{$topSlices} {
			width: $size+px;
			height: $size+px;
			top: (($radius - $size) / 2)+px;
			left: (($radius - $size) / 2)+px;
			transform: translateY((-1*$offset)+px) rotateX(90deg);
			animation: slice-#{$i} $speed ease-in-out infinite;
		}
		
		.slice-#{$i} {
			width: $size+px;
			height: $size+px;
			top: (($radius - $size) / 2)+px;
			left: (($radius - $size) / 2)+px;
			transform: translateY(($offset)+px) rotateX(90deg);
			animation: slice-#{$topSlices} $speed ease-in-out infinite;
		}

		@keyframes slice-#{$i} {
			0%, 19% {
				transform: translateY(0deg) rotateX(90deg);
				opacity: 0;
			}
			20% {
				transform: translateY(0deg) rotateX(90deg);
				opacity: 0.8;
				border: 2px solid $fill;
			}
			30% {
				transform: translateY(($offset + ($i*4))+px) rotateX(90deg);
				opacity: 0.5;
				border: 2px solid #D500F9;
			}
			35% {
				transform: translateY(($offset + ($i*2))+px) rotateX(90deg);
			}
			40% {
				transform: translateY(($offset + ($i))+px) rotateX(90deg);
			}
			45% {
				transform: translateY(($offset + ($i*.5))+px) rotateX(90deg);
			}
			50%,65% {
				transform: translateY(($offset)+px) rotateX(90deg);
			}
			70% {
				transform: translateY(($offset + ($i*4))+px) rotateX(90deg);
				opacity: 0.8;
				border: 2px solid #D500F9;
			}
			80% {
				transform: translateY(0) rotateX(90deg);
				opacity: 0.5;
				border: 2px solid $fill;
			}
			85%, 100% {
				transform: translateY(0) rotateX(90deg);
				opacity: 0;
			}
		}

		@keyframes slice-#{$topSlices} {
			0%, 19% {
				transform: translateY(0deg) rotateX(90deg);
				opacity: 0;
			}
			20% {
				transform: translateY(0deg) rotateX(90deg);
				opacity: 0.8;
				border: 2px solid $fill;
			}
			30% {
				transform: translateY((-1*$offset - ($i*4))+px) rotateX(90deg);
				opacity: 0.5;
				border: 2px solid #D500F9;
			}
			35% {
				transform: translateY((-1*$offset - ($i*2))+px) rotateX(90deg);
			}
			40% {
				transform: translateY((-1*$offset - ($i))+px) rotateX(90deg);
			}
			45% {
				transform: translateY((-1*$offset - ($i*.5))+px) rotateX(90deg);
			}
			50%,65% {
				transform: translateY((-1*$offset)+px) rotateX(90deg);
			}
			70% {
				transform: translateY((-1*$offset - ($i*4))+px) rotateX(90deg);
				opacity: 0.8;
				border: 2px solid #D500F9;
			}
			80% {
				transform: translateY(0) rotateX(90deg);
				opacity: 0.5;
				border: 2px solid $fill;
			}
			85%, 100% {
				transform: translateY(0) rotateX(90deg);
				opacity: 0;
			}
		}
	}
}

@keyframes initiateSlice {
	0% {
		transform: rotateX(90deg) scale(0);
	}
	10% {
		transform: rotateX(90deg) scale(1.2);
	}
	15% {
		transform: rotateX(90deg) scale(0.9);
	}
	20%, 75% {
		transform: rotateX(90deg) scale(1);
	}
	80% {
		transform: rotateX(90deg) scale(1.2);
	}
	90%, 100% {
		transform: rotateX(90deg) scale(0);
	}
}