Create CSS3 animation Surprise box - blow

Status: Closed
Nagroda: $10
Uzyskane Zgłoszenia: 3
Zwycięzca: RathiRohit

Winner

Opis Konkursu

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

Zalecane Umiejętności

Winner

Opublikuj Konkurs Taki Jak Ten

Opinie o Pracodawcy

“Quality Communication”

avremi89, Israel.

Najlepsze zgłoszenia do tego konkursu

RathiRohit India

1
mjony387 Bangladesh

0
al459724 Egypt

0
testotorko Bulgaria

0
testotorko Bulgaria

0
testotorko Bulgaria

0

Zobacz więcej zgłoszeń

Publiczna Tablica Wyjaśnień

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