使用CSS的animation属性制作图片呼吸特效

最近在网上看到一个酷炫的放大缩小类似呼吸的特效，图片会从原来大小放大1.1倍，之后再还原，再放大，一直循环。只需要使用CSS的animation属性就能制作，现在分享给大家。

使用方法

在style里面加入以下的CSS样式

        @keyframes scaleDraw {
            /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
                transform:scale(1);
                /*开始为原始大小*/
            }
            25% {
                transform:scale(1.1);
                /*放大1.1倍*/
            }
            50% {
                transform:scale(1);
            }
            75% {
                transform:scale(1.1);
            }
        }
        .demo {
             width:200px;
             height:200px;
             background-color: red;
             -webkit-animation-name:scaleDraw;
             /*关键帧名称*/
             -webkit-animation-timing-function:ease-in-out;
             /*动画的速度曲线*/
             -webkit-animation-iteration-count:infinite;
             /*动画播放的次数*/
             -webkit-animation-duration:5s;
             /*动画所花费的时间*/
         }

HTML结构

<div class="demo"></div>