Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
i'm using just JS and CSS, but for the IOS app – jagger May 20 at 16:06

2 Answers

up vote 2 down vote accepted

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

share|improve this answer
Not sure that it will suit. I've modified my first question with full text. Do you think it will work in my case? I make it for IOS browser. – jagger May 20 at 16:14
I'm not sure I understand what's changed. Here's a fiddle demonstrating jsfiddle.net/qkrby/1. You could pretty easily extrapolate from there to parameterize the target and size. Does that make things clearer? – Matt Berkowitz May 20 at 16:54
yep, you're right! – jagger May 25 at 9:46
up vote 1 down vote

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';
share|improve this answer
gion_13, can't do this, as i will need also calculate size of object, it's position (float left or right) and maybe other parameters to modify. – jagger May 20 at 16:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.