Create CSS3 animation Surprise box - blow

  • Статус: Closed
  • Награды: $10
  • Полученные заявки: 6
  • Победитель: RathiRohit

Краткое описание конкурса

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

Рекомендуемые навыки

Отзыв работодателя

“Quality Communication”

Изображение профиля avremi89, Israel.

Лучшие заявки этого конкурса

Показать больше конкурсных работ

Панель общих вопросов

  • vvalkanov
    vvalkanov
    • 1 месяц назад

    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 месяц назад
    1. vvalkanov
      vvalkanov
      • 1 месяц назад

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

      • 1 месяц назад
  • mjony387
    mjony387
    • 1 месяц назад

    Working on it

    • 1 месяц назад
    1. avremi89
      Организатор конкурса
      • 1 месяц назад

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

      • 1 месяц назад
    2. mjony387
      mjony387
      • 1 месяц назад

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

      • 1 месяц назад
  • RathiRohit
    RathiRohit
    • 1 месяц назад

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

    • 1 месяц назад
    1. RathiRohit
      RathiRohit
      • 1 месяц назад

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

      • 1 месяц назад
    2. RathiRohit
      RathiRohit
      • 1 месяц назад

      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 месяц назад
  • Josnarani
    Josnarani
    • 1 месяц назад

    #increaseprize

    • 1 месяц назад
  • Josnarani
    Josnarani
    • 1 месяц назад

    you need 3 box animation or 1 box?

    • 1 месяц назад
    1. avremi89
      Организатор конкурса
      • 1 месяц назад

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

      • 1 месяц назад

Показать больше комментариев

С чего начать в организации конкурсов

  • Опубликуйте свой конкурс

    Опубликовать Ваш конкурс Быстро и легко

  • Получайте тонны заявок

    Получайте тонны заявок Со всего мира

  • Присудите приз лучшей заявке

    Присудите приз лучшей заявке Загрузите файлы - это легко!

Опубликуйте конкурс или присоединяйтесь к нам уже сегодня!