Через CSS зациклить смену контрастности div блока

Тема в разделе "Верстка", создана пользователем droni4, 22 май 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Контрастность
    cssimagehovers-14.jpg
    Код:
    <div class="contrast pic">
      <img src="http://lorempixel.com/output/animals-q-c-300-300-9.jpg" alt="dog">
    </div>
    Код:
    /*CONTRAST*/
    .contrast img {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
    .contrast img:hover {
      -webkit-filter: contrast(185%);
    }

    Теперь вопрос!
    Как реализовать постоянный цикл при наведении мышкой на img или div блок
    постоянный цикл в данном случае подразумевается постоянная смена контрастности от 0 до 100, от 100 до 0 и так пока пользователь не уберет курсор мышки с блока-картинки.

    Тут можно посмотреть в галереи на этот эффект, но тут на флеше


    Вот дяденька очень круто мутит каким то образом постоянный цикл
     
    Последнее редактирование: 23 май 2014
  2. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    215
    Симпатии:
    329
  3. marcher145

    marcher145 Писатель

    Регистр.:
    17 мар 2014
    Сообщения:
    5
    Симпатии:
    1
    Возможно лутче исходить не из цикличности, а от анимации просто прописать ее на долгий период времени, хотя ее вроде можно зациклить

    Примерчик
    http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation5
    http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4
    http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
    http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2
    http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1
     
  4. Djamal

    Djamal Создатель

    Регистр.:
    27 май 2014
    Сообщения:
    20
    Симпатии:
    0
    такие фишки пока четка поддерживает только chrome , кроссбраузерности только через css (без javascripta) все равно не достичь (по крайней мере на данный момент) !