ionicons+animation实现小动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小图标动画</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script src="jquery-1.10.1.min.js"></script>
    <style type="text/css">
        @keyframes loading {
            from {
                transform: rotate(0);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .abc:before{
            font-size: 30px;
            color: #f00;
            transform: rotate(180deg);
        }
        .cba:before{
            transition: transform 2s;
        }

    </style>
</head>
<body>
    <i class="ion-arrow-up-b abc cba"></i>
</body>
</html>