How to complete the whole animated png even after the hover effect ends?
Question
I have animated png as the background image in div.
I need to play the whole animation, even after the mouse hover is finished. Now my animation is restarted/canceled, but not completed.
This is my WIP code.
body { background-color: #9e7d3a; }.body { padding-top: 5%; }.logo { background-image: url("https://i.stack.imgur.com/Uv7z3.png"); height: 50px; background-repeat: no-repeat; background-size: 200px; background-position: center; }.logo:hover { background-image: url("https://i.stack.imgur.com/kPFr9.png"); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="logo.css" /> <title>Logo-test</title> </head> <body> <div class="body"> <div class="logo"></div> </div> </body> </html>
1 answers
solution1
2 ACCPTED 2021-02-17 18:00:43
try using transition delay like this
body { background-color: #9e7d3a; }.body { padding-top: 5%; }.logo { background-image: url("https://i.stack.imgur.com/Uv7z3.png"); height: 50px; background-repeat: no-repeat; background-size: 200px; background-position: center; transition-delay: 3s; /* change this based on animation duration */ }.logo:hover { background-image: url("https://i.stack.imgur.com/kPFr9.png"); transition-delay: 0s; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="logo.css" /> <title>Logo-test</title> </head> <body> <div class="body"> <div class="logo"></div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make hover effect stays even after unhover?
how to stable hover effect even after mouse out
Hover effect on PNG image
How do I make the hover effect complete
jQuery mouse hover animated effect
How to overcome from this issue in jquery for an animated hover effect?
whole page affected by hover effect
jQuery UI-animated text box hops into the container div only after toggle effect is complete
How to disable hover effect after clicking it?
How to put a hover effect to an after content is css?
Related Tags