如何用CSS做动画效果

1、使用“@keyframe 类名”来定义动画过程，一般写在目标类名同级即可。例子代码如下：（达到图片缩放动画效果）

@keyframes iconXY{
    0%{
       transform: scale(1);
       opacity: 0;
    }
    25%{
       ransform: scale(1.3);
       opacity: 0.5;
    }
    50%{
       transform: scale(1.5);
       opacity: 0.9;
    }
    75%{
        transform: scale(1.3);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

2、定义完动画后，在需要动画的类名里面，使用animation。例子代码如下：

<img class="icon" src="/static/images/bf.png" alt=""/>

.icon{
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -40rpx 0 0 -40rpx;
     width: 80rpx;
     height: 80rpx;
     animation: iconXY linear 3s 0s infinite;//第一个时间是整个动画时间，第二个是每一次动画间隔
}
@keyframes iconXY{
    0%{
       transform: scale(1);
       opacity: 0;
    }
    25%{
       ransform: scale(1.3);
       opacity: 0.5;
    }
    50%{
       transform: scale(1.5);
       opacity: 0.9;
    }
    75%{
        transform: scale(1.3);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}