Изменение параметров CSS с помощью Javascript

Question

У меня есть следующие 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); 
    } 
} 

И это 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> 

Код масштабирует объект в два раза. Как я могу отправить различные параметры «шкалы» на основе объекта?

Я использую его для увеличения изображений onclick и перехода к оригинальной шкале при втором нажатии. Мои изображения имеют разный размер и положение в тексте, поэтому мне нужно сделать их масштабированными в центре экрана.

Answer 1

Одним из вариантов было бы использовать переход вместо анимации

.makebig { 
    transition: 1s transform ease; 
} 

, то вы можете установить желаемый конечный преобразование каждого элемента в отдельности с JS и браузер будет анимировать его соответствующим образом

Answer 2

можно жёстко несколько классов CSS и анимации в соответствии с вашими потребностями:

@-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; 
} 

и просто жонглировать от названий класса ЯШ:

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