yiyizym/ballon_animation.html

## ballon_animation.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ballon animation</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .ballon {
            content: ' ';
            width: 168px;
            height: 256px;
            background-image: url('./ballon.png');
            background-size: contain;
            opacity: 0;
            z-index: 1;
            animation-name: ballon_moveup, ballon_show, ballon_floating;
            animation-duration: 1s, 0.8s, 5s;
            animation-delay: 1s, 1.2s, 2s;
            animation-iteration-count: 1, 1, infinite;
            animation-fill-mode: forwards, forwards, forwards;
            animation-timing-function: cubic-bezier(0.40, 0.00, 0.20, 1.00), cubic-bezier(0.33, 0.00, 0.67, 1.00), cubic-bezier(0.40, 0.00, 0.20, 1.00), cubic-bezier(0.33, 0.00, 0.67, 1.00);
        }

        @keyframes ballon_moveup {
            from {
                transform: translate3d(0, 166.6px, 0);
            }
            to {
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes ballon_show {
            to {
                opacity: 1;
            }
        }

        @keyframes ballon_floating {
            0% {
                transform: translate3d(0, 0, 0);
            }
            50% {
                transform: translate3d(0, 27px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        new Vue({
            el: '#app',
            template: '<div class="ballon"></div>'
        })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>ballon animation</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<style>
	.ballon {
	content: ' ';
	width: 168px;
	height: 256px;
	background-image: url('./ballon.png');
	background-size: contain;
	opacity: 0;
	z-index: 1;
	animation-name: ballon_moveup, ballon_show, ballon_floating;
	animation-duration: 1s, 0.8s, 5s;
	animation-delay: 1s, 1.2s, 2s;
	animation-iteration-count: 1, 1, infinite;
	animation-fill-mode: forwards, forwards, forwards;
	animation-timing-function: cubic-bezier(0.40, 0.00, 0.20, 1.00), cubic-bezier(0.33, 0.00, 0.67, 1.00), cubic-bezier(0.40, 0.00, 0.20, 1.00), cubic-bezier(0.33, 0.00, 0.67, 1.00);
	}

	@keyframes ballon_moveup {
	from {
	transform: translate3d(0, 166.6px, 0);
	}
	to {
	transform: translate3d(0, 0, 0);
	}
	}

	@keyframes ballon_show {
	to {
	opacity: 1;
	}
	}

	@keyframes ballon_floating {
	0% {
	transform: translate3d(0, 0, 0);
	}
	50% {
	transform: translate3d(0, 27px, 0);
	}
	100% {
	transform: translate3d(0, 0, 0);
	}
	}
	</style>
	</head>

	<body>
	<div id="app"></div>
	<script>
	new Vue({
	el: '#app',
	template: '<div class="ballon"></div>'
	})
	</script>
	</body>

	</html>