CSS3动画轻松进出无限

Question

我有以下代码：

＆＃13;

＆＃13;

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}

/* Standard syntax */
@keyframes zoom {
   from {
        transform: scale(1,1);
   }
   to {
        transform: scale(1.5,1.5);
   }
}


img {
    -webkit-animation: zoom 1s ease-in-out infinite; /* Chrome, Safari, Opera */
    animation: zoom 1s ease-in-out infinite;
    height:100px;
}

＆＃13;

<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />

＆＃13;

＆＃13;

＆＃13;

我试图让图像永远放大和缩小，而是放大并跳回到原始大小。

Answer 1

替代解决方案（“替代”属性）：

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.5, 1.5);
    }
    to {
        -webkit-transform: scale(1, 1);
    }
}

@keyframes zoom {
   from {
        transform: scale(1, 1);
   }
   to {
       transform: scale(1.5, 1.5);
   }
}


img {
    -webkit-animation: zoom 1s ease-in-out infinite alternate;
    animation: zoom 1s ease-in-out infinite alternate;
    height: 100px;
}

<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />

Answer 2

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.5, 1.5);
    }
    to {
        -webkit-transform: scale(1, 1);
    }
}

/* Standard syntax */
@keyframes zoom {
    from {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.5, 1.5);
    }
    to {
        transform: scale(1, 1);
    }
}


img {
    -webkit-animation: zoom 1s ease-in-out infinite; /* Chrome, Safari, Opera */
    animation: zoom 1s ease-in-out infinite;
    height: 100px;
}

<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />