Как сделать плавное увеличение на CSS3?

Question

[Cheizer]

Друзья, как сделать что бы анимация возвращалась так же плавно назад как и вперед?

Вот простой пример поднял на codepin https://codepen.io/Cheizer/pen/KQpMKQ

Использую свойство animation scale, но вперед резко дергается картинка, назад плавно хорошо. Как увеличение сделать тоже плавным?

#loader {
    animation-name: scale;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezer(1, .01, 0, 1.01);
    transform-origin: 50% 50%
}
@keyframes scale {
    0 {
        transform: scale(.9)
    }
    30% {
        transform: scale(1)
    }
    100% {
        transform: scale(.9)
    }
}

Answer 1

[Станислав Зиненко]

@keyframes scale {
    0 {
        transform: scale(.9)
    }
    30% {
        transform: scale(1)
    }
    100% {
        transform: scale(.9)
    }
}

В этом коде просто нужно было поставить знак "процент" возле нуля.

Comments

[Cheizer]

Точно! Мой косяк :) Спасибо.

Answer 2

[Cheizer]

Вот так нашел пример, может кому понравится

@keyframes scale {
  from {
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
        transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
        transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
   -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
        transform: scale(1.0);
    opacity: 0.75;
  }
}