Анимация 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> 
 
<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>