/    Sign up×
Community /Pin to ProfileBookmark

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:
*NO URL’s PLEASE*
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

    to post a comment
    CSS

    2 Comments(s)

    Copy linkTweet thisAlerts:
    @rootOct 16.2018 — When asking for help with something, you post the problem element cdpde and any information like error messages, etc in the forum and not post URL's as it looked like you were spamming.

    If you want help, its put the stuff here so people are not racing off after links to view source code you know should be posted in the forum....
    ×

    Success!

    Help @Legendaryz1WBDL spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...