Open rachael-tomaszewski opened 6 years ago
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; }`
Does your .shape element have the variation-1 class in the HTML?
.shape
variation-1
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; }`