Rotating Shapes/Key Frames

[rachael-tomaszewski]

I'm trying to continuously rotate a circle on my page, but it isn't responding. Is there anyone who could take a look at my code and help me troubleshoot what the problem might be? Thanks!

`* { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body { margin: 0; padding: 0; width: 100vw; min-height: 100vh; font-family: 'Lato', sans-serif; }

h1 { margin-top: 0; margin-bottom: 140px; font-weight: 100; font-size: 30px; }

a { color: red; text-decoration: none; transition: all 2s; transition-delay: .5s;

}

a:hover { color: red; }

.content { height: 100%; min-height: 100vh; width: 100%; padding: 20px; background: #efefef; transition: all 2s; }

.content:hover { background: black; }

.content: hover .shape { transform: rotateZ(45deg) scale(1.5); background: white; }

.content:hover a { color: white; }

.shape { border-radius: 100px; margin-left: 100px; width: 200px;
height: 200px; background: #c63b23; transition: transform 0.5s, background-color 2s; }

.shape:hover { transform: rotateZ(45deg) scale(1.5); background: white;

}

@keyframes rotate { 0% {transform: rotate(0deg); } 25% {transform: rotate(90deg); } 100% {transform: rotate(360deg); } }

.variation-1 { animation-name: rotate; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: normal; }`

[orzubalsky]

Does your .shape element have the variation-1 class in the HTML?