html - 通过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;
    }

所以你只需要在动画结束时使图像的位置与开始时的位置相同。 :)