Create CSS3 animation Surprise box - blow

Estado: Closed
Premio: $10
Propuestas recibidas: 3
Ganador: RathiRohit

Winner

Resumen del concurso

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

Habilidades recomendadas

Winner

Publica un concurso similar

Comentarios del empleador

“Quality Communication”

avremi89, Israel.

Principales propuestas de este concurso

RathiRohit India

1
mjony387 Bangladesh

0
al459724 Egypt

0
testotorko Bulgaria

0
testotorko Bulgaria

0
testotorko Bulgaria

0

Ver más participaciones

Tablero de aclaración pública

vvalkanov
- 4 años atrás
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 años atrás
1. vvalkanov
  - 4 años atrás
  https://ventseslav.000webhostapp.com/animation.html
  - 4 años atrás
mjony387
- 4 años atrás
Working on it
- 4 años atrás
1. Organizador del concurso
  - 4 años atrás
  What do you mean
  You working on it ..?
  Are you going to show me part of the project ready?
  - 4 años atrás
2. mjony387
  - 4 años atrás
  Yes, you are right, i am going to submit the project.
  - 4 años atrás
RathiRohit
- 4 años atrás
Animating this with CSS takes a lot of effort for creating cross-browser pure CSS solution, please #increaseprize if possible :)
- 4 años atrás
Ver 1 mensaje mas
1. RathiRohit
  - 4 años atrás
  All code is already done for the animation I have posted in entries. It supports all 3 major browsers. #increaseprize :)
  - 4 años atrás
2. RathiRohit
  - 4 años atrás
  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 años atrás
Josnarani
- 4 años atrás
#increaseprize
- 4 años atrás
Josnarani
- 4 años atrás
you need 3 box animation or 1 box?
- 4 años atrás
1. Organizador del concurso
  - 4 años atrás
  One box ..
  That performs all the animation steps I have listed in the project requirements
  - 4 años atrás