html - Scaling animation in CSS don't work -
i have problem make animation works. trying scale object nothing hapens. looked many similar answers on stackoverflow, nothing helped.
<!doctype html> <html> <head> <style> .logo { margin:auto; position: relative; background-color: black; background-size: 100% auto; background-repeat: no-repeat; background-position: center; width:60%; height:300px; -webkit-animation-name: example; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; animation-name: example; animation-duration: 4s; animation-iteration-count: 1; } @-webkit-keyframes example { 0% {-webkit-transform: scale(1,1);} 10% {-webkit-transform: scale(1.5,1.5); 100% {-webkit-transform: scale(1,1); } @keyframes example { 0% {transform: scale(1,1);} 10% {transform: scale(1.5,1.5); 100% {transform: scale(1,1);} } </style> </head> <body> <div class="logo" ></div> </body> </html>
i tried in every major browser, works. hope see error, or give other suggestion.
you have unclosed braces in there.
eg: line
10% { -webkit-transform: scale(1.5,1.5);
.logo { margin: auto; background-color: black; width: 60%; height: 300px; -webkit-animation-name: example; -webkit-animation-duration: 4s; animation-name: example; animation-duration: 4s; } @webkit-keyframes example { 0% { -webkit-transform: scale(1, 1); } 10% { -webkit-transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); } } @keyframes example { 0% { transform: scale(1, 1); } 10% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } }
<div class="logo"></div>
Comments
Post a Comment