shift

index.slim

.container
	- for i in 1..3
		.shaker
			ul.group
				- for j in 1..14
					li.line

shift.markdown

shift

lotsa dots... CSS only 🙇

A Pen by Riley Shaw on CodePen.

License.

style.sass

$size: 360px
$ratio: 0.8660254038  // sqrt(3)/2
$spacing: $size / 10 / $ratio
$offset: $ratio * 10px / 2
$period: 2s
$jitter: 4px

body
	background: #000

ul
	margin: 0
	padding: 0
	list-style: none

.container
	position: absolute
	top: 50%
	left: 50%
	height: $size
	width: $size
	transform: translate3d(-50%, -50%, 0)
	border-radius: $size * 10 / 57
	overflow: hidden
	background: #fff
	animation: glow $period alternate infinite linear

.shaker
	height: 100%
	width: 100%
	position: absolute
	animation: jitter $period alternate infinite

	&:nth-child(2)
		.group
			transform: rotate(60deg) translate3d(.5 /* cos(60deg) */ * $spacing * -1, 0.8660254038 /* sin(60deg) */ * $spacing * -2, 0)

			.line
				animation-delay: -$period / 3

	&:nth-child(3)
		.group
			transform: rotate(120deg) translate3d(-0.5 /*cos(120deg)*/ * $spacing * 0.5,  0.86602540378 /* sin(120deg) */ * $spacing * -2.5, 0)

			.line
				animation-delay: -$period * 2 / 3

.group
	height: 100%
	width: 100%

.line
	position: relative
	right: $spacing * 2
	height: $spacing * $ratio
	width: 140%
	background-image: radial-gradient(#000 10%, transparent 35%)
	background-size: $spacing $spacing
	background-position: $offset -1px -$spacing
	animation: slide $period infinite ease-in-out

	&:nth-child(even)
		right: $spacing * 3 / 2
		animation-name: slide-reverse

@keyframes slide
	0%
		opacity: 0
		background-position: $offset - 1px -$spacing
	1%
		opacity: 1
	16.67%
		background-position: $offset - $spacing -$spacing
	33.33%
		opacity: 1
	35.33%
		opacity: 0
	100%
		opacity: 0
		background-position: $offset - $spacing -$spacing

// Bummer. Since I wanted to make this fade-in-out, using
// animation-direction: reverse was a non-starter. Ah well.
@keyframes slide-reverse
	0%
		opacity: 0
		background-position: $offset - $spacing -$spacing
	1%
		opacity: 1
	16.67%
		background-position: $offset -$spacing
	33.33%
		opacity: 1
	35.33%
		opacity: 0
	100%
		opacity: 0
		background-position: $offset -$spacing

@keyframes jitter
	@for $i from 0 through 10
		$x: (2 - random(3)) * $jitter
		$y: (2 - random(3)) * $jitter
		#{$i * 10%}
			transform: translate3d($x, $y, 0)

@keyframes glow
	from
		box-shadow: 0 0 50px rgba(255, 255, 255, 0.7)
	to
		box-shadow: 0 0 100px rgba(255, 255, 255, 0.2)