通过 CSS 闪烁放大缩小图像

Question

我使用此代码创建一个闪烁的放大和缩小图像，但它只会放大，然后重置图像并再次放大。

@keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       100% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }

JSFiddle

Answer 1

简单的解决方案是：

    @keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }

因此，您只需要在动画结束时使图像与开始时的位置相同。

Answer 2

您必须再次将其动画化到起点。喜欢这个：

@keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
          -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }