CSS animation with transform scale not working in Chrome, Safari and IE but works in FF

Question

Despite prefixes, I don't know why transform: scale is not working in Chrome, Safari, IE, but works only in Firefox. Could somebody point out how to fix this issue? Maybe changing width and height in keyframes is better option?

Check this short CSS below line 109:

.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

Thx.

Answer 1

You just need to add the vendor prefix for the animation duration -webkit-animation-duration: 7s; . Hope this helps :)