Анимация SVG иконки раскрытия аккордеона

221
29 января 2020, 01:50

Есть SVG иконка, в коде она размещена инлайном. Нужно чтобы при раскрытии аккордеона иконка морфировала из показателя вниз в показатель вверх, что-то напоминающее взмахи крыльев птицы (образно). Пример SVG ниже (обязательно использовать такой дизайн).

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Artboard" stroke="#FF5F00" stroke-width="2">
                                <polyline id="Page-1" transform="translate(12, 12) rotate(90.000000) translate(-12, -12) " points="9 5 15.8461359 12 9 19"></polyline>
                            </g>
                        </g>
                    </svg>

Есть идеи, как подобное реализовать?

Answer 1

Вот так легко сделать при помощи 2х сегментов а не одного.

С одним все сложнее без js уже не справится.

Наведите мышкой на галочку для запуска анимации

<svg width="24px" height="24px" viewBox="-12 -12 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Artboard" stroke="#FF5F00" stroke-width="2"> 
            <polyline id="left" points="-8 -8 0 0"></polyline> 
            <polyline id="right" points="8 -8 0 0"></polyline> 
        </g> 
    </g> 
</svg> 
 
<svg width="24px" height="24px" viewBox="-12 -12 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Artboard" stroke="#FF5F00" stroke-width="2"> 
            <polyline id="left" points="-8 -8 0 0"></polyline> 
            <polyline id="right" points="8 -8 0 0"></polyline> 
        </g> 
    </g> 
</svg> 
 
<svg width="24px" height="24px" viewBox="-12 -12 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Artboard" stroke="#FF5F00" stroke-width="2"> 
            <polyline id="left" points="-8 -8 0 0"></polyline> 
            <polyline id="right" points="8 -8 0 0"></polyline> 
        </g> 
    </g> 
</svg> 
 
<style> 
 
polyline { 
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);   
  animation-duration: 1s; 
  animation-fill-mode: both; 
} 
 
svg:hover polyline#left {  
  animation-name: bounceLeft; 
} 
svg:hover polyline#right {  
  animation-name: bounceRight; 
} 
 
@keyframes bounceLeft { 
  0%, 20%, 53%, 80%, 100% { 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    transform: rotate(0deg); 
  } 
 
  40%, 43% { 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    transform: rotate(-30deg); 
  } 
 
  70% { 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    transform: rotate(-60deg); 
  } 
 
  100% { 
    transform: rotate(-90deg); 
  } 
} 
 
@keyframes bounceRight { 
  0%, 20%, 53%, 80%, 100% { 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    transform: rotate(0deg); 
  } 
 
  40%, 43% { 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    transform: rotate(30deg); 
  } 
 
  70% { 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    transform: rotate(60deg); 
  } 
 
  100% { 
    transform: rotate(90deg); 
  } 
} 
 
</style>

READ ALSO
Плавный переход страницы
HTML

Плавный переход страницы

Вот есть такой JS код:

 220
Копирование и вывод HTML блока
HTML

Копирование и вывод HTML блока

Обычный многоуровневый списокСуть: Необходимо скопировать список <ul class="dropdown__list"> который находится в элементе списка <li class="nav__item dropdown">...

 243
Не работает URL изображения в html [закрыт]
HTML

Не работает URL изображения в html [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он соответствовал тематике «Stack Overflow на русском»

 219
HTML styling без СSS
HTML

HTML styling без СSS

Всем привет! Прошу прощения за элементарные вопросы, но я учусь, учусь сам и спросить мне некогоВ общем осваиваю HLML, до CSS ещё не дошёл

 233