alexbatashev/index.html

## index.html
<html>
    <head>
        <style>
            @keyframes flip-n-slide-1 {
                from {
                    margin-left: 0px;
                    transform: rotateY(0deg);
                }

                to {
                    margin-left: 150px;
                    transform: rotateY(90deg);
                }
            }

            @-webkit-keyframes flip-n-slide-1 {
                from {
                    margin-left: 0px;
                    transform: rotateY(0deg);
                }

                to {
                    margin-left: 150px;
                    transform: rotateY(90deg);
                }
            }

            .flipping-1 {
                animation: flip-n-slide-1 0.3s ease;
            }

            .flipping-2 {
                animation: flip-n-slide-2 0.3s ease forwards;
            }


            @keyframes flip-n-slide-2 {
                from {
                    margin-left: 150px;
                    transform: rotateY(90deg);
                }

                to {
                    margin-left: 300px;
                    transform: rotateY(180deg);
                }
            }

            #card {
                width: 80px;
                height: 120px;
                transition: 0.3s;
            }

            .card_front {
                background-color: aqua;
            }

            .card_back {
                background-color: black;
            }

            .scene {

            }
        </style>
    </head>

    <body>

        <div class="scene">
            <div id="card" class="card_front">
            </div>
        </div>
        <script>

                const card = document.getElementById('card');

                card.addEventListener('click', _ => {
                    const halfCallback = function() {

                        card.removeEventListener("webkitAnimationEnd", this,false);
                        card.removeEventListener("animationend", this,false);
                        card.removeEventListener("oanimationend", this,false);

                        card.classList.remove('flipping-1');
                        card.classList.remove('card_front');
                        card.classList.add('card_back');
                        card.classList.add('flipping-2');
                    }

                    card.addEventListener("webkitAnimationEnd", halfCallback,false);
                    card.addEventListener("animationend", halfCallback,false);
                    card.addEventListener("oanimationend", halfCallback,false);

                    card.classList.add('flipping-1');
                });

            </script>
    </body>
</html>
	<html>
	<head>
	<style>
	@keyframes flip-n-slide-1 {
	from {
	margin-left: 0px;
	transform: rotateY(0deg);
	}

	to {
	margin-left: 150px;
	transform: rotateY(90deg);
	}
	}

	@-webkit-keyframes flip-n-slide-1 {
	from {
	margin-left: 0px;
	transform: rotateY(0deg);
	}

	to {
	margin-left: 150px;
	transform: rotateY(90deg);
	}
	}

	.flipping-1 {
	animation: flip-n-slide-1 0.3s ease;
	}

	.flipping-2 {
	animation: flip-n-slide-2 0.3s ease forwards;
	}


	@keyframes flip-n-slide-2 {
	from {
	margin-left: 150px;
	transform: rotateY(90deg);
	}

	to {
	margin-left: 300px;
	transform: rotateY(180deg);
	}
	}

	#card {
	width: 80px;
	height: 120px;
	transition: 0.3s;
	}

	.card_front {
	background-color: aqua;
	}

	.card_back {
	background-color: black;
	}

	.scene {

	}
	</style>
	</head>

	<body>

	<div class="scene">
	<div id="card" class="card_front">
	</div>
	</div>
	<script>

	const card = document.getElementById('card');

	card.addEventListener('click', _ => {
	const halfCallback = function() {

	card.removeEventListener("webkitAnimationEnd", this,false);
	card.removeEventListener("animationend", this,false);
	card.removeEventListener("oanimationend", this,false);

	card.classList.remove('flipping-1');
	card.classList.remove('card_front');
	card.classList.add('card_back');
	card.classList.add('flipping-2');
	}

	card.addEventListener("webkitAnimationEnd", halfCallback,false);
	card.addEventListener("animationend", halfCallback,false);
	card.addEventListener("oanimationend", halfCallback,false);

	card.classList.add('flipping-1');
	});

	</script>
	</body>
	</html>