@keyframs实现图片gif效果

【推荐阅读】微服务还能火多久？>>>

页面中使用动效图 一般让设计出一个gif格式的图，但是git图效果都很差，有一个替代gif图做动效的方法：使用@keyframes

具体思路：

1、设计两个互斥的图片（相当于把gif图分割成一帧一帧的图片，这里用两帧为例子）

2、把两个图片放在同一个位置上，重叠

3、使用css改变图片的透明度，实现动画效果

上代码！！

<div class="ani ani_1"></div>
<div class="ani ani_2"></div>

.ani_1{
background: url(/xxx.png) 0 0 no-repeat;
animation-name: opacity_1_0_1;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.ani_2{
background: url(/xxx.png) 0 0 no-repeat;
animation-name: opacity_0_1_0;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@-webkit-keyframes opacity_1_0_1 {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: .2;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes opacity_0_1_0 {
0% {
opacity: .2;
}
25% {
opacity: .2;
}
75% {
opacity: 1;
}
100% {
opacity: .2;
}
}

动画透明度和动画进度都可以自己设置~  你明我就暗，你暗我就明~

完成啦~

原文出处：https://www.cnblogs.com/huangxi/p/10470437.html