Making animation run after transition

Making animation run after transition

How can I make the bounce animation run after the object finishes scaling so it appears to all be fluid? The animation delay property doesn't seem to match up with the transition delay prop. Thanks for any help.

How can I make the bounce animation run after the object finishes scaling so it appears to all be fluid? The animation delay property doesn't seem to match up with the transition delay prop. Thanks for any help.

        function myFunction() {
            var image = document.getElementById('test');
            image.style.WebkitTransform = ('scale(2,2)');
            var piss = document.getElementById('piss');
            piss.classList.remove('bounce');
            piss.offsetWidth = piss.offsetWidth;
            piss.classList.add('bounce') ;
        }
    div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        transition-duration: 1.5s

}

.bounce {
    animation: bounce 450ms;
    animation-timing-function: linear;
}

@keyframes bounce{ 25%{transform: scale(1.15);} 50%{transform: scale(0.9);} 75%{transform: scale(1.1);} 100%{transform: scale(1.0);} } <div id='piss'> <div id='test'> </div> </div>

<button class = 'butt' onclick = 'myFunction()'>FIRST</button>


javascript html css scala

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

CSS Button Generator (Mini) using HTML, CSS, and JavaScript

Learn how to create a mini CSS Button generator just by using HTML, CSS, and JavaScript. We will only cover some properties related to the button but you can use other properties to allow users to play around with different styles and designs.

Filter Search List using JavaScript

I will show you how to create a list with filter functionality using JavaScript to search any item inside the list.

How to add CSS & Javascript to your HTML

How to add CSS & Javascript to your HTML - In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boiler...

CSV Viewer with HTML, CSS & JavaScript

We'll be creating a CSV Viewer that can be used on the web using HTML, CSS & JavaScript. CSV Viewer with HTML, CSS & JavaScript - Project Video