Расти круговое изображение, используя ключевые кадры и CSS

Question

Я пытаюсь вырастить круглое изображение при наведении, но не могу заставить этот код работать.

Я могу заставить круг расти с помощью CSS-трансформации, но он сразу же растет и немного уродлив. В идеале я бы хотел, чтобы задержка составляла 2-3000 мс с линейным ростом как при наведении, так и при наведении мыши.

Я знаю, что могу сделать это с помощью JS/D3, но нужно сделать это с помощью CSS, если это возможно.

Пытался

.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{

animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        width:250px;}

    25%
    {
    width:260px;}

    75%
    {
    width:270px;}

    100%
    {
    width:280px;
    }
}

а также

 .wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);}
         }
        25%
        {
        -webkit-transform: scale(1.033);
        -ms-transform: scale(1.033);
        transform: scale(1.033);}

        75%
        {
        -webkit-transform: scale(1.066);
        -ms-transform: scale(1.066);
        transform: scale(1.066);}

        100%
        {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        }

Но ни один из них не работает.

Есть лучший способ сделать это?

Answer 1

Я создал ручку на основе вашего кода

С помощью transform: scale это лучший метод, так как он увеличивает как width а также height,

Ключевым моментом, который вы упустили при создании плавной анимации, является атрибут перехода, его нужно применять к элементу в его нормальном состоянии, а не к :hover государство.

Я добавил этот стиль перехода:

transition: 3s ease-in-out;

Обратите внимание, что это та же длина, что и время анимации. ease-in-out это стандартная функция замедления, если вы хотите получить более подробную информацию, попробуйте поиграть с кубическим Безье

Задержка анимации может быть легко добавлена ​​с помощью этого атрибута:

animation-delay:2s

Еще одна вещь, которая делает анимацию ключевых кадров более плавной, это то, что стили 0% и 100% одинаковы, поэтому в этом примере круг возвращается к исходному масштабу к тому времени, когда он достигает 100%, что создает приятную, плавную, воспроизводимую анимацию.

Я также создал альтернативную анимацию, которая выглядит еще более плавной, для этого достаточно просто установить масштаб для точек 0% и 100% в анимации:

0%{transform: scale(1)}
100%{transform: scale(2)}

Еще одна вещь, которую вы можете сделать, это изменить настройку цикла анимации с normal в infinite alternateОформите мой второй пример, который это использует infinite alternate что заставляет круг расти и уменьшаться без внезапных щелчков.

Answer 2

Вы можете отложить начало перехода, используя свойство transition-delay.

div {
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

W3Schools

Answer 3

Вы можете отложить начало анимации с помощью animation-delay

Такие как

.delay {
     animation-delay:2s
}

Ссылка @ MDN

Демо, показывающее разницу ниже

.circle {
  border-radius: 50%;
  display: block;
}
.circle:hover {
  animation: mymove 3s normal;
}
.delay:hover {
  animation-delay: 2s
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
25% {
  -webkit-transform: scale(1.033);
  -ms-transform: scale(1.033);
  transform: scale(1.033);
}
75% {
  -webkit-transform: scale(1.066);
  -ms-transform: scale(1.066);
  transform: scale(1.066);
}
100% {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.033);
    -ms-transform: scale(1.033);
    transform: scale(1.033);
  }
  75% {
    -webkit-transform: scale(1.066);
    -ms-transform: scale(1.066);
    transform: scale(1.066);
  }
  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>