动画css3实现自动翻转功能，显示不同内容实例效果图如下css3实现前后自动翻转功能，翻转前后显示不同内容产品不让用gi

实例效果图如下

css3实现前后自动翻转功能，翻转前后显示不同内容

产品不让用gif图只能手动用css3实现了，花了一点时间，贴出代码，供需要的人参考

<!--
 * @Description: 
 * @Author: chenzel
 * @Date: 2020-08-05 18:13:46
 * @LastEditTime: 2020-08-18 18:23:22
 * @LastEditors: chenzel
-->
<html lang="en">
<head>
    <meta charset="UTF-8" />
</head>
<style>
    .wrapReverse {
        position: relative;
        width: 100%;
        text-align: center;
    }
    .wrapReverse .front {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: inline-block;
        animation: spanfront 3000ms linear infinite;
    }
    .wrapReverse .back {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: inline-block;
        animation: spanback 3000ms linear infinite;
    }
    
    @-webkit-keyframes spanfront {
        0% {
            transform: scale(0.5, 1);
        }
        2% {
            transform: scale(1, 1);
        }
        48% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(0.5, 1);
        }
        52% {
            transform: scale(0, 1);
        }
        98% {
            transform: scale(0, 1);
        }
        100% {
            transform: scale(0.2, 1);
        }
    }
    
    @-webkit-keyframes spanback {
        0% {
            transform: scale(0, 1);
        }
        52% {
            transform: scale(0, 1);
        }
        54% {
            transform: scale(0.5, 1);
        }
        56% {
            transform: scale(1, 1);
        }
        96% {
            transform: scale(1, 1);
        }
        98% {
            transform: scale(0.5, 1);
        }
        100% {
            transform: scale(0, 1);
        }
    }
</style>
<body>
    <div class="wrapReverse">
        <span class="front">123</span>
        <span class="back">abc</span>
    </div>
</body>
</html>