Changing CSS parameters using Javascript

Question

I have the following CSS:

.makebig {
    -webkit-animation-name: cssAnimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
}
.makesmall {
    -webkit-animation-name: cssAnimation1;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation1 {
    from {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
}

And this Javascript:

<script>
    function ani(fns1) {
    if (document.getElementById('fns1').getAttribute('clicked') == 'false') 
    {
        document.getElementById('fns1').className = 'makebig';
        document.getElementById('fns1').setAttribute('clicked', true);
    } else { 
        document.getElementById('fns1').className = 'makesmall';
        document.getElementById('fns1').setAttribute('clicked', false);
    }
}
</script>

The code scales the object in two times. How can I send different 'scale' parameters based on the object?

I use it for the images to enlarge onclick and go to original scale on the second click. My images has different size and position in the text, so i need to make them scaled in center of the screen.

Answer 1

One option would be to use transition instead of an animation

.makebig {
    transition: 1s transform ease;
}

then you can set the desired end transform on each element individually with js and the browser will animate it accordingly

Answer 2

you could hardcode several css classes and animations to suit your needs:

@-webkit-keyframes scale-1 {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
}


@-webkit-keyframes scale-2 {
    from {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(3) skew(0deg) translate(150px);
    }
}

#element {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
#element.scale-1 {
    -webkit-animation-name: scale-1;
}

#element.scale-2 {
    -webkit-animation-name: scale-1;
}

and just juggle with classnames from js:

element.className = 'scale-1';
// after some logic
element.className = 'scale-2';