Create CSS3 animation Surprise box - blow

Állapot: Closed
Díj: $10
Beérkezett pályamű: 3
Nyertes: RathiRohit

Winner

A verseny összegzése

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
7.The 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

Ajánlott készségek

Winner

Tegyen közzé egy hasonló versenyt

Munkaadói értékelés

“Quality Communication”

avremi89, Israel.

A verseny legjobb pályaművei

RathiRohit India

1
mjony387 Bangladesh

0
al459724 Egypt

0
testotorko Bulgaria

0
testotorko Bulgaria

0
testotorko Bulgaria

0

További pályaművek

Nyilvános pontosítófelület

vvalkanov
- 4 év telt el
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)
- 4 év telt el
1. vvalkanov
  - 4 év telt el
  https://ventseslav.000webhostapp.com/animation.html
  - 4 év telt el
mjony387
- 4 év telt el
Working on it
- 4 év telt el
1. A verseny kiírója:
  - 4 év telt el
  What do you mean
  You working on it ..?
  Are you going to show me part of the project ready?
  - 4 év telt el
2. mjony387
  - 4 év telt el
  Yes, you are right, i am going to submit the project.
  - 4 év telt el
RathiRohit
- 4 év telt el
Animating this with CSS takes a lot of effort for creating cross-browser pure CSS solution, please #increaseprize if possible :)
- 4 év telt el
További 1 üzenet
1. RathiRohit
  - 4 év telt el
  All code is already done for the animation I have posted in entries. It supports all 3 major browsers. #increaseprize :)
  - 4 év telt el
2. RathiRohit
  - 4 év telt el
  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? :)
  - 4 év telt el
Josnarani
- 4 év telt el
#increaseprize
- 4 év telt el
Josnarani
- 4 év telt el
you need 3 box animation or 1 box?
- 4 év telt el
1. A verseny kiírója:
  - 4 év telt el
  One box ..
  That performs all the animation steps I have listed in the project requirements
  - 4 év telt el