css过渡不适用于移动铬

Question

我正在尝试在单击某些文本时使用css转换来缩放图像。

复选标记图像应该在每次单击链接时进行动画处理。然而，在iPhone Chrome中，复选标记没有动画 - 只是从一个状态跳转到另一个状态，似乎忽略了css {transition：transform 200ms}。

除了iPhone Chrome浏览器之外，它似乎无处不在 - 我尽可能地浏览了所有内容，但它完全让我难过！

Codepen链接：https://codepen.io/anon/pen/oqBJzr

CSS：

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

JavaScript的：

function checkMarkAnim() {

    $('.checkmark').toggleClass('scale');

}

关于出错的任何指示都会有所帮助。

先感谢您

Update:

添加-webkit-transition: -webkit-transform 200ms;的建议似乎没有解决问题（虽然我最初认为它有）。

Answer 1

还请添加/保持-webkit-transition: transform 200ms;。所以最后你应该：

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

在这里使用移动铬（iOS）：https://codepen.io/miikaeru/pen/aMXYEb