autoplay anim

by phloe

HTML

<div class="video">
	<div class="video__anim"></div>
</div>

<div class="video">
	<div class="video__anim-2"></div>
</div>

CSS

.video {
	width:200px;
	position: relative;
	background: red;
	margin: 20px;
	float: left;
}

.video:after {
	content: "";
	display: block;
	padding-bottom: 56.25%;
}

.video__anim, .video__anim:before, .video__anim:after {
	position: absolute;
	width: 4px;
	height: 14px;
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	animation: 30s video-anim-bar infinite ease-in-out;
}

.video__anim {
	bottom: 10px;
	right: 15px;
	-webkit-transform: scaleY(0.2);
	transform: scaleY(0.2);
}

.video__anim:before {
	content: "";
	top: 0;
	left: -5px;
	-webkit-animation-delay: -15s;
	animation-delay: -15s;
}

.video__anim:after {
	content: "";
	top: 0;
	left: 5px;
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
}

@keyframes video-anim-bar {
	0% { transform: scaleY(0.56); }
	1% { transform: scaleY(0.241); }
	2% { transform: scaleY(0.513); }
	3% { transform: scaleY(0.665); }
	4% { transform: scaleY(0.88); }
	5% { transform: scaleY(0.803); }
	6% { transform: scaleY(0.727); }
	7% { transform: scaleY(0.065); }
	8% { transform: scaleY(0.324); }
	9% { transform: scaleY(0.182); }
	10% { transform: scaleY(0.538); }
	11% { transform: scaleY(0.476); }
	12% { transform: scaleY(0.885); }
	13% { transform: scaleY(0.637); }
	14% { transform: scaleY(0.629); }
	15% { transform: scaleY(0.909); }
	16% { transform: scaleY(0.753); }
	17% { transform: scaleY(0.404); }
	18% { transform: scaleY(0.777); }
	19% { transform: scaleY(0.388); }
	20% { transform: scaleY(0.957); }
	21% { transform: scaleY(0.406); }
	22% { transform: scaleY(0.228); }
	23% { transform: scaleY(0.166); }
	24% { transform: scaleY(0.211); }
	25% { transform: scaleY(0.403); }
	26% { transform: scaleY(0.246); }
	27% { transform: scaleY(0.856); }
	28% { transform: scaleY(0.682); }
	29% { transform: scaleY(0.917); }
	30% { transform: scaleY(0.7); }
	31% { transform: scaleY(0.935); }
	32% { transform: scaleY(0.286); }
	33% { transform: scaleY(0.849); }
	34% { transform:...