Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animate and shake effect for rotated div using css3

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #253764
    vinay049
    Participant

    I have been trying to use animate and shake effects for already rotated and absolute positioned div.

    I have tried to use animate css from the following link:

    https://daneden.github.io/animate.css/ 
    

    What I want to achieve is following:

    1. Top div coming from top side in rotating motion and position itself in defined absolute position
    2. Middle div coming from right side in rotating motion and position itself in defined absolute position

    3. Bottom div coming from bottom side in rotating motion and position itself in defined absolute position

    Then on hover over them this div just shake horizontally for 2 seconds (As divs are absolute positioned and rotated using css3) – not able to do that.

        https://jsfiddle.net/6snh38sw/8/
    

    And once correct option is dropped, I want red colored div to go back in reverse direction in which they came and middle black div to go bottom like bounce effect (going up for 10px and then going out of screen at bottom)

    PS: I haven’t posted css related changes which I tried to apply in the code as I messed up css so I undo everything. Can anyone help me please?

    #253765
    Beverleyh
    Participant

    PS: I haven’t posted css related changes which I tried to apply in the code as I messed up css so I undo everything. Can anyone help me please?

    We would need to see your attempt at applying the animate.css effects you speak of in order to assess and offer suggestions for fixing the problem, otherwise this becomes a “do it for me” request, which we’re not really here to do… Unless you’re looking to hire someone?

    So something got messed up? What does that mean? Did things not animate the way you expect? Do the boxes not come to rest in their desired positions? You need to explain what exactly got messed up – show us with your code. Unfortunately we can’t really assist with a problem we can’t see.

    #253766
    vinay049
    Participant

    By using word – “messed up” , I meant I made many changes in css and js files to apply these changes so I had to undo things. And this jsfiddle is only a portion of a thing on which I am working so I made up upto this level.

    Is there anyway to put entire codebase along with js files and images somewhere so that everyone can see it

    #253767
    Beverleyh
    Participant

    Is there anyway to put entire codebase along with js files and images somewhere so that everyone can see it

    A live web page? But I don’t think that providing your entire codebase is the way to go – it is more likely to put potential helpers off (too much code and the prospect of poking about in the dev console). At the end of the day, we’re volunteers who contribute to this online help forum in our free time, which means that we don’t have that much time to spend on absorbing/processing/making sense of, a whole heap of somebody else’s code (or usage guides for 3rd party plugins).

    You will be more likely to receive help if you make things super-easy for us. That means a reduced demo showing just enough CSS, HTML and JS to demonstrate the problem… but so far, we can’t see the problem.

    #253768
    vinay049
    Participant

    Sure. I will update fiddle based on your reply above. I’ll put everything I tried there. Thank you for quick reply.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.