css - 具有变换比例的 CSS 动画在 Chrome、Safari 和 IE 中不起作用，但在 FF 中起作用

Question

尽管有前缀，但我不知道为什么 transform: scale 在 Chrome、Safari、IE 中不起作用，但仅在 Firefox 中起作用。有人可以指出如何解决这个问题吗？也许改变关键帧的宽度和高度是更好的选择？

检查第 109 行下方的简短 CSS：

.icon-elements p.wizjer {
    background: black;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    margin-top: 108px;
    margin-left: 109px;
    z-index: 97;
    display: block;
    border: 1px solid gray;
    border-radius: 50%;
 -webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);


    -webkit-animation-name: ap-wizjer;
    -moz-animation-name: ap-wizjer;
    -ms-animation-name: ap-wizjer;
    animation-name: ap-wizjer;
    animation-duration: 7s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


    @-webkit-keyframes ap-wizjer {

        0% {

            -webkit-transform: scale(1, 1);

            transform: scale(1, 1);

        }

        50% {

            -webkit-transform: scale(1.3, 1.3);

            transform: scale(1.3, 1.3);

        }

        100% {

            -webkit-transform: scale(1, 1);

            transform: scale(1, 1);

        }

    }

jsFiddle

谢谢。

Answer 1

您只需要为动画持续时间添加供应商前缀 -webkit-animation-duration: 7s; 。希望这可以帮助 ：）