Fri, 2022-07-29 06:31
I have a "display:none;" DIV containing the word "Download" and a down-arrow. When a user clicks on a link to start the download, the DIV is then moved to that click location and displayed. At that point I apply a "classList" animation which references @keyframes. The color changes specified within the keyframes work. But, I tried to use "position:fixed; left:10px; bottom:30px;" and all that seems to be ignored.
I did read somewhere that positioning was not possible with keyframes. I hope that was from someone that has a wrong answer.
I only specified the "position:fixed; left:10px; bottom:30px;" in the 100% section of the @keyframes. I did not add anything to the 0%, 30%, 60%, 90% which are also part of this @keyframes. I was hoping nothing further would be needed.
I already did the work using screenX and screenY to get the starting position for the DIV and that is working. Since the starting position is totally dynamic it seems silly to have to hardcode something unknown. On the other hand, I have not seen any CSS examples that move the object on a diagonal. So, that is troubling.
