WebKit Bugzilla
Attachment 346840 Details for
Bug 188442
: animations with transform properties & :active states get stuck running
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
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:
animation-test-transform.html
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>
View Attachment As Raw
Actions:
View
Attachments on
bug 188442
: 346840