PassionPenguin/Animation.SiccessNFail.html

## Animation.SiccessNFail.html
<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SuccessNFail</title>
    <style>
        svg {
            transition: 400ms;
            opacity: 0;
        }

        circle {
            fill: transparent;
            stroke-width: 4px;
            stroke-dashoffset: 1000;
            stroke-dasharray: 1000;
            transition: 800ms ease-in-out;
            transition-delay: 200ms;
        }

        polyline {
            fill: transparent;
            stroke-width: 5px;
            opacity: 0;
            transition: 400ms;
        }

        button {
            display: inline-block;
            margin: 20px auto;
            width: 144px;
            height: 44px;
            border: 1px solid #000;
            border-radius: 5px;
            background: transparent;
            outline: none;
            font: 16px/1 "Material Icons";
            cursor: pointer;
            transition: 500ms;
        }

        .tbutton {
            display: block;
            margin: 0 auto;
            width: 294px;
        }

        button:hover, button:focus {
            background: #00000022;
        }

        .active circle {
            stroke-dashoffset: 761;
        }

        .active polyline {
            opacity: 1;
        }

        .active {
            opacity: 1;
        }

        .Fail polyline {
            transition: 600ms cubic-bezier(0.33, 0.24, 0.83, 1.25);
            transition-delay: 200ms;
            transform: translateY(120px);
        }

        .Fail.active polyline {
            transform: translate(0);
        }

        .Success polyline {
            stroke-dasharray: 65;
            stroke-dashoffset: 60;
        }

        .Success.active polyline {
            stroke-dashoffset: 0;
        }

        svg {
            transform: translate(100px, 44px);
        }

        text {
            font: 24px/1 Anodina;
            transform: translate(-100px, 44px);
            opacity: 0;
        }

        .active text {
            opacity: 1;
            transform: translate(100px, 44px);
        }
    </style>
</head>
<body>


<svg class="Success" xmlns="http://www.w3.org/2000/svg">
    <circle r="38" cx="40" cy="40" stroke="#8BC34A" transform="rotate(-90 40 40)"/>
    <!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
    <polyline points="20,35 35,55 60,25" stroke="#8BC34A"/>
    <text>Love it～</text>
</svg>
<svg class="Fail" xmlns="http://www.w3.org/2000/svg">
    <circle r="38" cx="40" cy="40" stroke="#F44336" transform="rotate(-90 40 40)"/>
    <!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
    <polyline points="25,55 55,25" stroke="#F44336"/>
    <polyline points="25,25 55,55" stroke="#F44336"/>
    <text>Fail to dislike :)</text>
</svg>

<hr>

<div class="tbutton">
    <button onclick="document.querySelector('.Success').classList.add('active');"><span class="mi">thumb_up</span>
    </button>
    <button onclick="document.querySelector('.Fail').classList.add('active');">thumb_down</button>
</div>
</body>
</html>
	<!doctype html>
	<html lang="cn">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>SuccessNFail</title>
	<style>
	svg {
	transition: 400ms;
	opacity: 0;
	}

	circle {
	fill: transparent;
	stroke-width: 4px;
	stroke-dashoffset: 1000;
	stroke-dasharray: 1000;
	transition: 800ms ease-in-out;
	transition-delay: 200ms;
	}

	polyline {
	fill: transparent;
	stroke-width: 5px;
	opacity: 0;
	transition: 400ms;
	}

	button {
	display: inline-block;
	margin: 20px auto;
	width: 144px;
	height: 44px;
	border: 1px solid #000;
	border-radius: 5px;
	background: transparent;
	outline: none;
	font: 16px/1 "Material Icons";
	cursor: pointer;
	transition: 500ms;
	}

	.tbutton {
	display: block;
	margin: 0 auto;
	width: 294px;
	}

	button:hover, button:focus {
	background: #00000022;
	}

	.active circle {
	stroke-dashoffset: 761;
	}

	.active polyline {
	opacity: 1;
	}

	.active {
	opacity: 1;
	}

	.Fail polyline {
	transition: 600ms cubic-bezier(0.33, 0.24, 0.83, 1.25);
	transition-delay: 200ms;
	transform: translateY(120px);
	}

	.Fail.active polyline {
	transform: translate(0);
	}

	.Success polyline {
	stroke-dasharray: 65;
	stroke-dashoffset: 60;
	}

	.Success.active polyline {
	stroke-dashoffset: 0;
	}

	svg {
	transform: translate(100px, 44px);
	}

	text {
	font: 24px/1 Anodina;
	transform: translate(-100px, 44px);
	opacity: 0;
	}

	.active text {
	opacity: 1;
	transform: translate(100px, 44px);
	}
	</style>
	</head>
	<body>


	<svg class="Success" xmlns="http://www.w3.org/2000/svg">
	<circle r="38" cx="40" cy="40" stroke="#8BC34A" transform="rotate(-90 40 40)"/>
	<!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
	<polyline points="20,35 35,55 60,25" stroke="#8BC34A"/>
	<text>Love it～</text>
	</svg>
	<svg class="Fail" xmlns="http://www.w3.org/2000/svg">
	<circle r="38" cx="40" cy="40" stroke="#F44336" transform="rotate(-90 40 40)"/>
	<!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
	<polyline points="25,55 55,25" stroke="#F44336"/>
	<polyline points="25,25 55,55" stroke="#F44336"/>
	<text>Fail to dislike :)</text>
	</svg>

	<hr>

	<div class="tbutton">
	<button onclick="document.querySelector('.Success').classList.add('active');"><span class="mi">thumb_up</span>
	</button>
	<button onclick="document.querySelector('.Fail').classList.add('active');">thumb_down</button>
	</div>
	</body>
	</html>