-
CSS Animation – DIV from top:200px to top:0px
Hello there !! I need some help to resolve some doubts in CSS !! If you can help me I will appreciate !!
First visit the link: https://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html
See the ‘Source Code’ from the browser !
What am I trying to do ??!!
I want that the div element, make move animation, comes from {top:200px} to {top:0px} !!
In this example, I found two erros:
– First Error: When the div is automatically start moving, if I put my mouse into it, before it´s finished, the div gives a jump directly to the top !! “I don´t want that” ! I want if I place the mouse pointer until it´s moving, that don´t make the div to jump !! I want that don´t happen nothing if I place the mouse until is moving!!
– Second Error: After the div comes to top, If I put the mouse into it, it´s change the color, made by animation ! But after that, when I put the mouse pointer out, the div again comes to top:200px and start the movement to the top:0px again !! What I want is: that the div moves only “one time” and “stops” at top:0px !! And after stop, the change div color mouse over keeps active !!
I tried searching in the internet but I didn´t found something that resolve this two problems !!
If it is possible, Can you give a hand ??
Thanks
Carlos -
2 Replies
-
I can’t help you with the CSS, but this sort of thing is easily done with Elementor Page Builder if you’re using WordPress for your site. You can easily make any element animate on in any number of ways very easily. So, if you haven’t gone the WordPress / Pagebuilder route, it’s might be time to look into it.
_______________________________________________________________________
https://BretFX.com FCPX Plugins & Templates for Editors & Motion Graphics Artists
Hang Tag https://bretfx.com/product/hang-tag
Overshoot Text https://bretfx.com/product/overshoot-text/
Outliner https://bretfx.com/product/outliner/
Clock Maker https://bretfx.com/product/bretfx-clock-maker/ -
I would agree with Bret that the easiest way to become a CSS ninja is by using one of the free pagebuilders for WordPress, such as Elementor or Brizy. Both are very powerful and easy to use.
Best regards,
Ronald Lindeboom
CEO, Creative COW LLCCreativity is a process wherein the student and the teacher are located in the same individual.
Reply to this Discussion! Login or Sign Up