Create CSS3 animation Surprise box - blow

  • Status: Closed
  • Prize: $10
  • Entries Received: 6
  • Winner: RathiRohit

Contest Brief

Create CSS3 animation
Surprise box - blow

Animation steps:
1. For 3 seconds the box shrinks - expands and returns to its normal size (steps 1-2)
Steps 1-2 repeat for 3 seconds, creating the feeling that the box will open immediately.
2. After 3 seconds, the lid of the box flies up and disappears
3. Confetti flying out of the box (once) is scattered down and disappears.
4. The MacAfee box comes out of the box followed by the text (once).
5. While the MacAfee box comes out, create a light effect from the already opened box (the image itself can be used

More requirements:
6. The development tools are js and css only
CSS Animation, Delay, Transform methods must be used
[login to view URL] animation should work in IE11 / Edge / Firefox / Chrome browsers
8. The box should be in the center of the screen of the page
Center up and down And center of left and right

Recommended Skills

Employer Feedback

“Quality Communication”

Profile image avremi89, Israel.

Top entries from this contest

View More Entries

Public Clarification Board

  • vvalkanov
    vvalkanov
    • 1 month ago

    Hi! I just finish my entry, but i see there is a winner. You can extend and give me a chanse. Check this link (https://ventseslav.000webhostapp.com/animation.html)

    • 1 month ago
    1. vvalkanov
      vvalkanov
      • 1 month ago

      https://ventseslav.000webhostapp.com/animation.html

      • 1 month ago
  • mjony387
    mjony387
    • 1 month ago

    Working on it

    • 1 month ago
    1. avremi89
      Contest Holder
      • 1 month ago

      What do you mean
      You working on it ..?
      Are you going to show me part of the project ready?

      • 1 month ago
    2. mjony387
      mjony387
      • 1 month ago

      Yes, you are right, i am going to submit the project.

      • 1 month ago
  • RathiRohit
    RathiRohit
    • 1 month ago

    Animating this with CSS takes a lot of effort for creating cross-browser pure CSS solution, please #increaseprize if possible :)

    • 1 month ago
    1. RathiRohit
      RathiRohit
      • 1 month ago

      All code is already done for the animation I have posted in entries. It supports all 3 major browsers. #increaseprize :)

      • 1 month ago
    2. RathiRohit
      RathiRohit
      • 1 month ago

      Checkout GIF of the final animation here: https://gifyu.com/image/qbTZ
      (Note: I have lowered FPS and resolution of screen capture to generate smooth GIF, actual result in browser looks all clear and without any lags) Can you #increaseprize to $15 now? :)

      • 1 month ago
  • Josnarani
    Josnarani
    • 1 month ago

    #increaseprize

    • 1 month ago
  • Josnarani
    Josnarani
    • 1 month ago

    you need 3 box animation or 1 box?

    • 1 month ago
    1. avremi89
      Contest Holder
      • 1 month ago

      One box ..
      That performs all the animation steps I have listed in the project requirements

      • 1 month ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!