Attachment 346840 Details for Bug 188442 – animation-test-transform.html

animation-test-transform.html

animation-test-transform.html (text/html), 1007 bytes, created by Jer Noble on 2018-08-09 10:33:24 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jer Noble

Created: 2018-08-09 10:33:24 PDT

Size: 1007 bytes

patch

obsolete

><!DOCTYPE html>
><html>
><head>
><title>Animation with Transform vs Top</title>
><style>
>.magic-8-ball {
>	position: relative;
>	margin: 50px;
>	width: 600px;
>	height: 600px;
>	border-radius: 50%;
>	background-image: linear-gradient(125deg, rgba(250, 250, 250, 0.5), transparent 100%);
>	cursor: pointer;
>}
>
>.magic-8-ball.top {
>	background-color: rgb(0, 75, 0);
>	animation-name: shake-8-ball-top;
>}
>
>.magic-8-ball.transform {
>	background-color: rgb(75, 0, 0);
>	animation-name: shake-8-ball-transform;
>}
>
>.magic-8-ball:active {
>	animation-duration: .2s;
>	animation-iteration-count: infinite;
>}
>
>@keyframes shake-8-ball-top {
>	from { top: 0px; }
>	25% { top: -50px; }
>	75% { top: 50px; }
>	to { top: 0px; }
>}
>
>@keyframes shake-8-ball-transform {
>	from { transform: translateY(0px); }
>	25% { transform: translateY(-50px); }
>	75% { transform: translateY(50px); }
>	to { transform: translateY(0px); }
>}
>
></style>
></head>
><body>
>	<div class="magic-8-ball top"></div>
>	<div class="magic-8-ball transform"></div>
>	</div>
></html>

<!DOCTYPE html>
<html>
<head>
<title>Animation with Transform vs Top</title>
<style>
.magic-8-ball {
	position: relative;
	margin: 50px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background-image: linear-gradient(125deg, rgba(250, 250, 250, 0.5), transparent 100%);
	cursor: pointer;
}

.magic-8-ball.top {
	background-color: rgb(0, 75, 0);
	animation-name: shake-8-ball-top;
}

.magic-8-ball.transform {
	background-color: rgb(75, 0, 0);
	animation-name: shake-8-ball-transform;
}

.magic-8-ball:active {
	animation-duration: .2s;
	animation-iteration-count: infinite;
}

@keyframes shake-8-ball-top {
	from { top: 0px; }
	25% { top: -50px; }
	75% { top: 50px; }
	to { top: 0px; }
}

@keyframes shake-8-ball-transform {
	from { transform: translateY(0px); }
	25% { transform: translateY(-50px); }
	75% { transform: translateY(50px); }
	to { transform: translateY(0px); }
}

</style>
</head>
<body>
	<div class="magic-8-ball top"></div>
	<div class="magic-8-ball transform"></div>
	</div>
</html>

Actions: View

Attachments on bug 188442: 346840