Create CSS3 animation Surprise box - blow

Tila: Closed
Palkinto: $10
Vastaanotetut työt: 3
Voittaja: RathiRohit

Winner

Kilpailun tehtävänanto

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

Suositellut taidot

Winner

Ilmoita samanlainen kilpailu

Työnantajan palaute

“Quality Communication”

avremi89, Israel.

Kilpailun parhaat työt

RathiRohit India

1
mjony387 Bangladesh

0
al459724 Egypt

0
testotorko Bulgaria

0
testotorko Bulgaria

0
testotorko Bulgaria

0

Näytä lisää töitä

Julkinen selvennystaulu

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