Animating grid column


by Jeremy Caudle
code

I wanted to see if I could animate the position of grid element by creating an animation that used grid-column. It looks like you can't do that, so I'll need to figure out an alternative if I want to try that in the future. I'm not quite sure of a use case for it, but I thought it was worth giving a shot.

JUMP
text
text
text
text
text
text
text
text

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div class="jump">JUMP</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			<div>text</div>
			
		</div>
CSS 
.codedoodle-block {
			max-width: 40em;
			margin: 1rem auto;
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 200px 1fr 1fr;
			grid-gap: 1rem;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 14px;
		}

		.codedoodle-block div {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-content: center;
			background: #cdcdcd;
			text-align: center;
		}
		
		@keyframes switchgridposition {
			0% {
				background-color: black;
			}
			50% {
				background-color: blue;
			}
			100% {
				background-color: red;
			}
		}

		.jump {
			animation: switchgridposition 9s ease-in-out 0s infinite alternate;	
		}

Tags