Issue
How can i make a code where if you open my webpage then this happens: https://www.youtube.com/watch?v=tGsKzZtRwxw using css?
But what i want instead is for the logo to first zoom in (faster, maybe 5 sec until the animation is over) to show the logo, then it goes to the top left where it stays there when you browse through my page. It is for a school project with the theme star wars.
Solution
You can do something like in below snippet (using animation) :
Use styles and decoration according to need , this is only a demo.
As known font-size is for text so this animation will work only for text . If you want animation for other stuffs than change accordingly like can use
widthheighthigher values or can usetransform: scale()property
function zoom() {
var reed = document.getElementById("demo");
reed.classList.add("animation");
}.animation {
animation: zoomer 5s linear;
}
@keyframes zoomer {
0% {
font-size: 300px;
}
100% {
font-size: 30px;
}
}
.color {
color: red;
font-size:30px;
}<body onload="zoom()">
<h1 id="demo" class="color">content</h1>
</body>Answered By – Rana
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0