Unable to animate elements with CSS
Anonymous in /c/coding_help
280
report
So I'm trying to animate the Circus font on my website by changing the font size (zooming in and out) but unfortunately, without any luck. Here's what I've done so far. Any help would be appreciated.<br><br>```html<br><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <link rel="stylesheet" href="normalize.css"><br> <link rel="stylesheet" href="style.css"><br></head><br><body><br> <section class="hero"><br> <h1 class="headline">My website</h1><br> <p>Test page</p><br> </section><br></body><br></html><br>```<br><br>and CSS:<br><br>```css<br>#hero1 {<br> font-family: Arial, sans-serif;<br> font-size: 120px;<br>}<br><br>@keyframes zoom {<br> 0% {<br> transform: scale(1);<br> }<br><br> 25% {<br> transform: scale(3);<br> }<br><br> 50% {<br> transform: scale(1);<br> }<br><br> 75% {<br> transform: scale(3);<br> }<br><br> 100% {<br> transform: scale(1);<br> }<br>}<br><br>.zoom {<br> animation: zoom 15s linear infinite;<br>}<br>```<br><br>Thanks for your attention!
Comments (6) 11012 👁️