使用 CSS 和 Javascript 向 HTML DOM 对象添加动画的正确方法是什么？

Question

I added an SVG in HTML, detailed its actual position in CSS and removed it from the visible area with CSS: top: -100px . then added JS setTimeout() function to remove the top: -100px from CSS. But the SVG should have come softly as animation but it happens to appear. Can you help me out of this?

 onload = () => { setTimeout(() => { document.querySelector(`.jhalar`).classList.remove(`outOfBox`) }, 900) }

 .jhalar{ position: absolute; left: 10vw; transition: .6s all ease-out; } .outOfBox{ top: -200px; }

 <svg class="jhalar outOfBox" width="545" height="110" viewBox="0 0 425 90" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M112 0C112 26.5097 89.6142 48 62 48C34.3858 48 12 26.5097 12 0" stroke="black"/> <path d="M411 0C411 26.5097 388.614 48 361 48C333.386 48 311 26.5097 311 0" stroke="black"/> <path d="M174 0C174 13.2548 162.807 24 149 24C135.193 24 124 13.2548 124 0" stroke="black"/> <path d="M236 0C236 13.2548 224.807 24 211 24C197.193 24 186 13.2548 186 0" stroke="black"/> <path d="M299 0C299 13.2548 287.807 24 274 24C260.193 24 249 13.2548 249 0" stroke="black"/> <circle cx="6" cy="12" r="6" stroke="black"/> <circle cx="418" cy="12" r="6" stroke="black"/> <circle cx="305" cy="12" r="6" stroke="black"/> <circle cx="243" cy="12" r="6" stroke="black"/> <circle cx="180" cy="12" r="6" stroke="black"/> <circle cx="118" cy="12" r="6" stroke="black"/> <circle cx="6" cy="48" r="6" stroke="black"/> <circle cx="418" cy="48" r="6" stroke="black"/> <circle cx="305" cy="48" r="6" stroke="black"/> <circle cx="243" cy="36" r="6" stroke="black"/> <circle cx="180" cy="36" r="6" stroke="black"/> <circle cx="118" cy="48" r="6" stroke="black"/> <circle cx="6" cy="24" r="6" stroke="black"/> <circle cx="418" cy="24" r="6" stroke="black"/> <circle cx="305" cy="24" r="6" stroke="black"/> <circle cx="118" cy="24" r="6" stroke="black"/> <circle cx="6" cy="60" r="6" stroke="black"/> <circle cx="418" cy="60" r="6" stroke="black"/> <circle cx="6" cy="36" r="6" stroke="black"/> <circle cx="418" cy="36" r="6" stroke="black"/> <circle cx="305" cy="36" r="6" stroke="black"/> <circle cx="243" cy="24" r="6" stroke="black"/> <circle cx="180" cy="24" r="6" stroke="black"/> <circle cx="118" cy="36" r="6" stroke="black"/> <circle cx="6" cy="72" r="6" stroke="black"/> <circle cx="418" cy="72" r="6" stroke="black"/> <circle cx="305" cy="60" r="6" stroke="black"/> <circle cx="243" cy="48" r="6" stroke="black"/> <circle cx="180" cy="48" r="6" stroke="black"/> <circle cx="118" cy="60" r="6" stroke="black"/> <path d="M12 84C12 83.2121 11.8448 82.4319 11.5433 81.7039C11.2417 80.9759 10.7998 80.3145 10.2426 79.7574C9.68549 79.2002 9.02405 78.7583 8.2961 78.4567C7.56815 78.1552 6.78793 78 6 78C5.21207 78 4.43185 78.1552 3.7039 78.4567C2.97595 78.7583 2.31451 79.2002 1.75736 79.7574C1.20021 80.3145 0.758251 80.9759 0.456723 81.7039C0.155194 82.4319 -6.88831e-08 83.2121 0 84L6 84H12Z" stroke="black"/> <path d="M424 84C424 83.2121 423.845 82.4319 423.543 81.7039C423.242 80.9759 422.8 80.3145 422.243 79.7574C421.685 79.2002 421.024 78.7583 420.296 78.4567C419.568 78.1552 418.788 78 418 78C417.212 78 416.432 78.1552 415.704 78.4567C414.976 78.7583 414.315 79.2002 413.757 79.7574C413.2 80.3145 412.758 80.9759 412.457 81.7039C412.155 82.4319 412 83.2121 412 84L418 84H424Z" stroke="black"/> <path d="M311 72C311 71.2121 310.845 70.4319 310.543 69.7039C310.242 68.9759 309.8 68.3145 309.243 67.7574C308.685 67.2002 308.024 66.7583 307.296 66.4567C306.568 66.1552 305.788 66 305 66C304.212 66 303.432 66.1552 302.704 66.4567C301.976 66.7583 301.315 67.2002 300.757 67.7574C300.2 68.3145 299.758 68.9759 299.457 69.7039C299.155 70.4319 299 71.2121 299 72L305 72H311Z" stroke="black"/> <path d="M249 60C249 59.2121 248.845 58.4319 248.543 57.7039C248.242 56.9759 247.8 56.3145 247.243 55.7574C246.685 55.2002 246.024 54.7583 245.296 54.4567C244.568 54.1552 243.788 54 243 54C242.212 54 241.432 54.1552 240.704 54.4567C239.976 54.7583 239.315 55.2002 238.757 55.7574C238.2 56.3145 237.758 56.9759 237.457 57.7039C237.155 58.4319 237 59.2121 237 60L243 60H249Z" stroke="black"/> <path d="M186 60C186 59.2121 185.845 58.4319 185.543 57.7039C185.242 56.9759 184.8 56.3145 184.243 55.7574C183.685 55.2002 183.024 54.7583 182.296 54.4567C181.568 54.1552 180.788 54 180 54C179.212 54 178.432 54.1552 177.704 54.4567C176.976 54.7583 176.315 55.2002 175.757 55.7574C175.2 56.3145 174.758 56.9759 174.457 57.7039C174.155 58.4319 174 59.2121 174 60L180 60H186Z" stroke="black"/> <path d="M124 72C124 71.2121 123.845 70.4319 123.543 69.7039C123.242 68.9759 122.8 68.3145 122.243 67.7574C121.685 67.2002 121.024 66.7583 120.296 66.4567C119.568 66.1552 118.788 66 118 66C117.212 66 116.432 66.1552 115.704 66.4567C114.976 66.7583 114.315 67.2002 113.757 67.7574C113.2 68.3145 112.758 68.9759 112.457 69.7039C112.155 70.4319 112 71.2121 112 72L118 72H124Z" stroke="black"/> <path d="M12 84C12 80.6863 9.31371 78 6 78C2.68629 78 0 80.6863 0 84" stroke="black"/> <path d="M424 84C424 80.6863 421.314 78 418 78C414.686 78 412 80.6863 412 84" stroke="black"/> <path d="M311 72C311 68.6863 308.314 66 305 66C301.686 66 299 68.6863 299 72" stroke="black"/> <path d="M249 60C249 56.6863 246.314 54 243 54C239.686 54 237 56.6863 237 60" stroke="black"/> <path d="M186 60C186 56.6863 183.314 54 180 54C176.686 54 174 56.6863 174 60" stroke="black"/> <path d="M124 72C124 68.6863 121.314 66 118 66C114.686 66 112 68.6863 112 72" stroke="black"/> <path d="M7.15256e-07 3.57628e-07C7.15256e-07 3.31371 2.68629 6 6 6C9.31371 6 12 3.31371 12 3.57628e-07" stroke="black"/> <path d="M412 3.57628e-07C412 3.31371 414.686 6 418 6C421.314 6 424 3.31371 424 3.57628e-07" stroke="black"/> <path d="M299 3.57628e-07C299 3.31371 301.686 6 305 6C308.314 6 311 3.31371 311 3.57628e-07" stroke="black"/> <path d="M237 3.57628e-07C237 3.31371 239.686 6 243 6C246.314 6 249 3.31371 249 3.57628e-07" stroke="black"/> <path d="M174 3.57628e-07C174 3.31371 176.686 6 180 6C183.314 6 186 3.31371 186 3.57628e-07" stroke="black"/> <path d="M112 3.57628e-07C112 3.31371 114.686 6 118 6C121.314 6 124 3.31371 124 3.57628e-07" stroke="black"/> <path d="M1 84V90M3 84V89M5 84V88M11 84V90M9 84V89M7 84V88" stroke="black"/> <path d="M413 84V90M415 84V89M417 84V88M423 84V90M421 84V89M419 84V88" stroke="black"/> <path d="M300 72V78M302 72V77M304 72V76M310 72V78M308 72V77M306 72V76" stroke="black"/> <path d="M238 60V66M240 60V65M242 60V64M248 60V66M246 60V65M244 60V64" stroke="black"/> <path d="M175 60V66M177 60V65M179 60V64M185 60V66M183 60V65M181 60V64" stroke="black"/> <path d="M113 72V78M115 72V77M117 72V76M123 72V78M121 72V77M119 72V76" stroke="black"/> </svg>

Answer 1

Try this out.

 onload = function () { setTimeout(function () { document.querySelector(`.jhalar`).classList.remove(`outOfBox`); }, 900); };

 .jhalar { position: absolute; left: 10vw; top: 0; transition: top 0.6s ease-out; } .outOfBox { top: -200px; }

 <svg class="jhalar outOfBox" width="545" height="110" viewBox="0 0 425 90" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M112 0C112 26.5097 89.6142 48 62 48C34.3858 48 12 26.5097 12 0" stroke="black" /> <path d="M411 0C411 26.5097 388.614 48 361 48C333.386 48 311 26.5097 311 0" stroke="black" /> <path d="M174 0C174 13.2548 162.807 24 149 24C135.193 24 124 13.2548 124 0" stroke="black" /> <path d="M236 0C236 13.2548 224.807 24 211 24C197.193 24 186 13.2548 186 0" stroke="black" /> <path d="M299 0C299 13.2548 287.807 24 274 24C260.193 24 249 13.2548 249 0" stroke="black" /> <circle cx="6" cy="12" r="6" stroke="black" /> <circle cx="418" cy="12" r="6" stroke="black" /> <circle cx="305" cy="12" r="6" stroke="black" /> <circle cx="243" cy="12" r="6" stroke="black" /> <circle cx="180" cy="12" r="6" stroke="black" /> <circle cx="118" cy="12" r="6" stroke="black" /> <circle cx="6" cy="48" r="6" stroke="black" /> <circle cx="418" cy="48" r="6" stroke="black" /> <circle cx="305" cy="48" r="6" stroke="black" /> <circle cx="243" cy="36" r="6" stroke="black" /> <circle cx="180" cy="36" r="6" stroke="black" /> <circle cx="118" cy="48" r="6" stroke="black" /> <circle cx="6" cy="24" r="6" stroke="black" /> <circle cx="418" cy="24" r="6" stroke="black" /> <circle cx="305" cy="24" r="6" stroke="black" /> <circle cx="118" cy="24" r="6" stroke="black" /> <circle cx="6" cy="60" r="6" stroke="black" /> <circle cx="418" cy="60" r="6" stroke="black" /> <circle cx="6" cy="36" r="6" stroke="black" /> <circle cx="418" cy="36" r="6" stroke="black" /> <circle cx="305" cy="36" r="6" stroke="black" /> <circle cx="243" cy="24" r="6" stroke="black" /> <circle cx="180" cy="24" r="6" stroke="black" /> <circle cx="118" cy="36" r="6" stroke="black" /> <circle cx="6" cy="72" r="6" stroke="black" /> <circle cx="418" cy="72" r="6" stroke="black" /> <circle cx="305" cy="60" r="6" stroke="black" /> <circle cx="243" cy="48" r="6" stroke="black" /> <circle cx="180" cy="48" r="6" stroke="black" /> <circle cx="118" cy="60" r="6" stroke="black" /> <path d="M12 84C12 83.2121 11.8448 82.4319 11.5433 81.7039C11.2417 80.9759 10.7998 80.3145 10.2426 79.7574C9.68549 79.2002 9.02405 78.7583 8.2961 78.4567C7.56815 78.1552 6.78793 78 6 78C5.21207 78 4.43185 78.1552 3.7039 78.4567C2.97595 78.7583 2.31451 79.2002 1.75736 79.7574C1.20021 80.3145 0.758251 80.9759 0.456723 81.7039C0.155194 82.4319 -6.88831e-08 83.2121 0 84L6 84H12Z" stroke="black" /> <path d="M424 84C424 83.2121 423.845 82.4319 423.543 81.7039C423.242 80.9759 422.8 80.3145 422.243 79.7574C421.685 79.2002 421.024 78.7583 420.296 78.4567C419.568 78.1552 418.788 78 418 78C417.212 78 416.432 78.1552 415.704 78.4567C414.976 78.7583 414.315 79.2002 413.757 79.7574C413.2 80.3145 412.758 80.9759 412.457 81.7039C412.155 82.4319 412 83.2121 412 84L418 84H424Z" stroke="black" /> <path d="M311 72C311 71.2121 310.845 70.4319 310.543 69.7039C310.242 68.9759 309.8 68.3145 309.243 67.7574C308.685 67.2002 308.024 66.7583 307.296 66.4567C306.568 66.1552 305.788 66 305 66C304.212 66 303.432 66.1552 302.704 66.4567C301.976 66.7583 301.315 67.2002 300.757 67.7574C300.2 68.3145 299.758 68.9759 299.457 69.7039C299.155 70.4319 299 71.2121 299 72L305 72H311Z" stroke="black" /> <path d="M249 60C249 59.2121 248.845 58.4319 248.543 57.7039C248.242 56.9759 247.8 56.3145 247.243 55.7574C246.685 55.2002 246.024 54.7583 245.296 54.4567C244.568 54.1552 243.788 54 243 54C242.212 54 241.432 54.1552 240.704 54.4567C239.976 54.7583 239.315 55.2002 238.757 55.7574C238.2 56.3145 237.758 56.9759 237.457 57.7039C237.155 58.4319 237 59.2121 237 60L243 60H249Z" stroke="black" /> <path d="M186 60C186 59.2121 185.845 58.4319 185.543 57.7039C185.242 56.9759 184.8 56.3145 184.243 55.7574C183.685 55.2002 183.024 54.7583 182.296 54.4567C181.568 54.1552 180.788 54 180 54C179.212 54 178.432 54.1552 177.704 54.4567C176.976 54.7583 176.315 55.2002 175.757 55.7574C175.2 56.3145 174.758 56.9759 174.457 57.7039C174.155 58.4319 174 59.2121 174 60L180 60H186Z" stroke="black" /> <path d="M124 72C124 71.2121 123.845 70.4319 123.543 69.7039C123.242 68.9759 122.8 68.3145 122.243 67.7574C121.685 67.2002 121.024 66.7583 120.296 66.4567C119.568 66.1552 118.788 66 118 66C117.212 66 116.432 66.1552 115.704 66.4567C114.976 66.7583 114.315 67.2002 113.757 67.7574C113.2 68.3145 112.758 68.9759 112.457 69.7039C112.155 70.4319 112 71.2121 112 72L118 72H124Z" stroke="black" /> <path d="M12 84C12 80.6863 9.31371 78 6 78C2.68629 78 0 80.6863 0 84" stroke="black" /> <path d="M424 84C424 80.6863 421.314 78 418 78C414.686 78 412 80.6863 412 84" stroke="black" /> <path d="M311 72C311 68.6863 308.314 66 305 66C301.686 66 299 68.6863 299 72" stroke="black" /> <path d="M249 60C249 56.6863 246.314 54 243 54C239.686 54 237 56.6863 237 60" stroke="black" /> <path d="M186 60C186 56.6863 183.314 54 180 54C176.686 54 174 56.6863 174 60" stroke="black" /> <path d="M124 72C124 68.6863 121.314 66 118 66C114.686 66 112 68.6863 112 72" stroke="black" /> <path d="M7.15256e-07 3.57628e-07C7.15256e-07 3.31371 2.68629 6 6 6C9.31371 6 12 3.31371 12 3.57628e-07" stroke="black" /> <path d="M412 3.57628e-07C412 3.31371 414.686 6 418 6C421.314 6 424 3.31371 424 3.57628e-07" stroke="black" /> <path d="M299 3.57628e-07C299 3.31371 301.686 6 305 6C308.314 6 311 3.31371 311 3.57628e-07" stroke="black" /> <path d="M237 3.57628e-07C237 3.31371 239.686 6 243 6C246.314 6 249 3.31371 249 3.57628e-07" stroke="black" /> <path d="M174 3.57628e-07C174 3.31371 176.686 6 180 6C183.314 6 186 3.31371 186 3.57628e-07" stroke="black" /> <path d="M112 3.57628e-07C112 3.31371 114.686 6 118 6C121.314 6 124 3.31371 124 3.57628e-07" stroke="black" /> <path d="M1 84V90M3 84V89M5 84V88M11 84V90M9 84V89M7 84V88" stroke="black" /> <path d="M413 84V90M415 84V89M417 84V88M423 84V90M421 84V89M419 84V88" stroke="black" /> <path d="M300 72V78M302 72V77M304 72V76M310 72V78M308 72V77M306 72V76" stroke="black" /> <path d="M238 60V66M240 60V65M242 60V64M248 60V66M246 60V65M244 60V64" stroke="black" /> <path d="M175 60V66M177 60V65M179 60V64M185 60V66M183 60V65M181 60V64" stroke="black" /> <path d="M113 72V78M115 72V77M117 72V76M123 72V78M121 72V77M119 72V76" stroke="black" /> </svg>

You forgot to add top: 0 in .jhalar of css snippet.