CSS, как здесь сделать «плавность»?

Question

[Михаил Р.]

Всем привет!
Сделал аккордеон, все работает стабильно, но:
В закрытом состояние стрелка направлена в право:

В открытом состояние, стрелка направлена в низ:

Иконка поворачивается слишком резко, надо что-бы плавно было.
Следующим методом делаю поворот.

-moz-transform: rotate(90deg);  /* Firefox */
  -o-transform: rotate(90deg);  /* Opera */
  -webkit-transform: rotate(90deg);  /* Safari y Chrome */

Заранее спасибо!

Answer 1

[Mr Crabbz]

css3generator.com - вот тут transition с режимом ease сгенерируйте.

Вот так наапример:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

Comments

[Михаил Р.]

Punkie Отличный сервис, возьму на заметку! =)

Answer 2

[Александр Петров]

transition

Comments

[Михаил Р.]

Александр Петров я вкурсе, как его верно записать? Я пробовал разными способами, но браузер не реагирует...

Answer 3

[Михаил Р.]

Разобрался, нужно добавить кусок кода:

*, :before {
  -webkit-transition:  all 0.2s ease-in-out;
  -moz-transition:  all 0.2s ease-in-out;
  -o-transition:  all 0.2s ease-in-out;
  -ms-transition:  all 0.2s ease-in-out;
  transition:  all 0.2s ease-in-out;