Module:Animation/styles.css

.t-animation {
	--t-animation-duration: calc(
		1s / var(--t-animation-fps) * var(--t-animation-frame-count)
	);

	position: relative;
	display: grid;
	place-content: center;
	overflow: hidden;
	width: var(--t-animation-width);
	height: var(--t-animation-height);
	margin-top: var(--t-animation-offset-top);
	margin-right: var(--t-animation-offset-right);
	margin-bottom: var(--t-animation-offset-bottom);
	margin-left: var(--t-animation-offset-left);
}

.t-animation-frames {
	--t-animation-frames-grid-template-columns: repeat(var(--t-animation-frame-count), 1fr);
	width: calc(var(--t-animation-frame-count) * 100%);
	height: 100%;
	display: grid;
	place-items: center;
	grid-template-columns: var(--t-animation-frames-grid-template-columns);
	animation-name: slide-film-strip;
	animation-duration: var(--t-animation-duration);
	animation-timing-function: steps(var(--t-animation-frame-count));
	animation-iteration-count: infinite;
}

.t-animation-frame {
	--t-animation-frame-delay: calc(
		var(--t-animation-frame-index) * 1s / var(--t-animation-fps) * -1
	);

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-delay: var(--t-animation-frame-delay);
}

/* HACK: Hide non-existing files */
.t-animation-frame .new {
	display: none;
}

@keyframes slide-film-strip {
	to {
		transform: translateX(-100%);
	}
}