Question 43227 in Html Question posted in
Some basic documentation can be found here.

Fingerprint Scanner Animation in CSS – Html

I created a fingerprint scanner animation in CSS, but I encountered an issue where the scanner animation does not stay in place and instead follows the animation of the scanning board. For more details, I have attached the my codesandbox link below.

codesandbox

I would really appreciate your help, thank you.

Tags:

2

Answers


  1. 0

    The top image moves with the scan because it is created using a CSS animation that animates the height of the image from 0% to 100% and back to 0% over a duration of 4 seconds. This animation is applied to the pseudo-element ::before of the .scan .retina element using the animate keyframe rule.

    The ::before pseudo-element is positioned absolutely with respect to the .scan .retina element, and its height is animated to fill the entire height of the .scan .retina element.

    Since the ::before pseudo-element is layered above the background image of the .scan .retina element, the appearance of the background image appears to move along with the animation.

    Login or Signup to reply.
  2. 0

    background-position: center uses the element height to calculate the central position for the background image. You are animating the element’s height so the central position is constantly changing. You will need to set a fixed location for background-position.

    Setting the background image to be 75px from the top seems to be the right position.

    .scan .retina::before {
    /* other css */
    background-position: 0 75px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search