Сделать анимацию стрелы при наведении и анимацию ссылки (удлинение)

Question

Всем привет.
Помогите пожалуйста сделать анимацию стрелы при наведении, как на Gif и анимацию ссылки. SVG и GIF прилагаются.

Пробовал добавить под стрелку "палку" чтобы просто смещать стрелку которая находилась поверх этой самой "палки", но выглядит это не красиво, ко всему прочему очень бросается в глаза, видно что наложены друг на друга две картинки. Если говорить про ссылку (вторая GIF), там даже представления нет как это сделать.

SVG вертикальной стрелки:

<svg xmlns="http://www.w3.org/2000/svg" width="23.585" height="14.323" viewBox="0 0 23.585 14.323" fill="none" stroke="#07af82" stroke-width="3" transform="rotate(90)">
<path d="M400.156,946h20.7" transform="translate(-400.156 -938.862)"/>
<path d="M399.785,935.5l6.263,5.908-6.263,6.263" transform="translate(-384.616 -934.406)"/>
</svg>

SVG обводки (мышки):

<svg xmlns="http://www.w3.org/2000/svg" width="30.294" height="46.371" viewBox="0 0 30 46" fill="#1160e8">
<path d="M32.347,17A14.953,14.953,0,0,0,17.2,31.754V48.617A14.953,14.953,0,0,0,32.347,63.371,14.953,14.953,0,0,0,47.494,48.617V31.754A14.953,14.953,0,0,0,32.347,17Zm11.54,31.617a11.544,11.544,0,0,1-23.081,0V31.754a11.544,11.544,0,0,1,23.081,0Z" transform="translate(-17.2 -17)"/>
</svg>

SVG стрелки для слайдера:

<svg xmlns="img/svg/arrow-next.svg" width="62.571" height="23.107" stroke="#fff" stroke-width="2" fill="none">
<path d="M400.156,946h60.765" transform="translate(-400.156 -935.497)"/>
<path d="M399.785,935.5l11.152,10.521L399.785,957.17" transform="translate(-349.801 -935.497)"/>
</svg>

Ну и для ссылки SVG стрелки:

<svg xmlns="http://www.w3.org/2000/svg" width="11.992" height="20.056" viewBox="0 0 11.992 20.056" fill="none" stroke="#1160e8" stroke-width="3">
<path d="M1300.558,1952.586l8.819-8.976-8.819-8.977" transform="translate(-1299.488 -1933.581)"/>
</svg>

P.S. Хотелось бы увидеть реализацию на CSS (без использования JavaScript), если это вообще возможно... Но в любом случае все рабочие варианты - это варианты и они нужны.

Answer 1

Немного косметики не помешает, но уже вроде все работает.

body {
  width: 100vw;
  height: 100vh;
  background: #222;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  font-family: Verdana;
  cursor: pointer;
}

a span {
  display: inline-block;
}

a.link-1 span.text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: tb-rl;
  padding-bottom: 20px;
  padding-left: 4px;
}

a.link-1 span.img {
  display:block;
}

a.link-1:hover span.text {
  -webkit-transform: translate(0, 10px);
  -ms-transform: translate(0 10px);
      transform: translate(0 10px);
}

a.link-1 svg {
  width: 28px;
}

a svg *,
a span.text {
  -webkit-transition-duration: 200ms;
       -o-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  shape-rendering: geometricPrecision;
}

a.link-1:hover svg line:nth-child(2) {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0 20px);
      transform: translate(0 20px);
}

a.link-1:hover svg polyline,
a.link-1:hover svg line:nth-child(3) {
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0 30px);
      transform: translate(0 30px);
}

a.link-2 svg {
  width: 62px;
}

a.link-2:hover svg * {
  -webkit-transform: translate(20px, 0);
  -ms-transform: translate(20px 0);
      transform: translate(20px 0);
}

a.link-3 {
  color: #1160e8;
}

a.link-3 svg {
  width: 48px;
}

a.link-3:hover span.text {
  -webkit-transform: translate(-10px, 0);
  -ms-transform: translate(-10px, 0);
      transform: translate(-10px, 0);
}

a.link-3:hover svg path {
  -webkit-transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
      transform: translate(10px, 0);
}

a.link-3 svg path:nth-child(1),
a.link-3:hover svg path:nth-child(3) {
  opacity: 0;
}

a.link-3:hover svg path:nth-child(1),
a.link-3 svg path:nth-child(3) {
  opacity: 1;
}

div.left {
  width: 80px;
  height: 100px;
  float: left;
}

div {
  padding: 10px;
}

<div class="left">
  <a class="link-1" href="#">
    <span class="text">Больше</span>
    <span class="img">
       <svg viewBox="0 0 28 70" 
            stroke-width="2" stroke="#00f" 
            fill="none">
         <path d="M2,13A10,10 180 1 1 26,13v20A10,10 180 1 1 2,32v-20Z"/>
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/>
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/> 
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/>
         <polyLine points="8,26,14,32,20,26" stroke="#0f0"/>
       </svg>
     </span>
   </a>
</div>
<div>
  <a class="link-2" href="#">
    <span class="text">01 / 06</span>
    <span class="img">
      <svg viewBox="0 0 62 22" 
           stroke="#00f" 
           stroke-width="4" 
           fill="none">
        <line x1="-20" y1="11" x2="40" y2="11" />
        <polyline points="30,1 40,11 30,21" />
      </svg>
    </span>
  </a>
</div>
<div>
  <a class="link-3" href="#">
    <span class="text">Узнать больше</span>
    <span class="img">
      <svg viewBox="0 0 48 20" 
           fill="none" 
           stroke="#1160e8" 
           stroke-width="3">
        <path d="M1,19l9-9-9-9"/>
        <path d="M11,19l9-9-9-9"/>
        <path d="M21,19l9-9-9-9"/>
      </svg>
    </span>
  </a>
</div>

Answer 2

По второй гифке: P.S. Очень много костылей, но работает вроде. Палками прошу не бить.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  
}
.center {
  position: absolute;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%);
}
.link, .link > a {
  font-family: 'Roboto';
  text-decoration: none;
  color: #5082bf;
  font-size: 14pt;
  font-weight: 600;
}

.link > a {
  position: relative;
  transition: 0.4s;
  left: 0pt;
}
.link > a:hover {
  left: -16pt;
}


.link > .decoration {
  position: relative;
  display: inline-block;
  width: 10pt;
  height: 10pt;
  transition: 0.2s;
  left: 0pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  transform: rotate(45deg);
}
.link:hover > .decoration {
  left: 7pt;
}


.link > .decoration::before {
  position: absolute;
  transition: opacity 0.2s;
  content: '';
  width: 10pt;
  height: 10pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  left: 5pt;
  top: -7pt;
  opacity: 1;
}
.link:hover > .decoration::before {
  opacity: 0;
}

.link > .decoration::after {
  position: absolute;
  transition: opacity 0.2s;
  content: '';
  width: 10pt;
  height: 10pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  left: -5pt;
  top: 3pt;
  opacity: 0;
}
.link:hover > .decoration::after {
  opacity: 1;
}

<div class="center">
    <div class="link">
      <a href="#" class="arrow-right">Узнать больше</a>
      <span class="decoration"></span>
    </div>
  </div>

Answer 3

Анимация стрелки мышки

Основана на анимации изменения атрибута d у path стрелки

При наведении курсора мышки на вертикальный текст Узнать больше path отвечающий за исходное положение стрелки, заменяется на финальный path - при выдвинутой стрелке

#txt {
fill:white;
font-weight:400;
font-size:20px;
transition:1s;
}
#txt:hover {
font-weight:900;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="30" height="220" viewBox="0 0 30 220" > 

<rect width="100%" height="100%" fill="#7B7C82" />
<text id="txt"  x="26" y="-10"  transform="rotate(89.4) translate(-20, 0)" >Узнать больше 
  
</text>
<path fill="#1160e8" d="M 15.1,146.7 A 15,15 0 0 0 0,161.5 v 16.9 a 15,15 0 0 0 15.1,14.8 15,15 0 0 0 15.1,-14.8 V 161.5 A 15,15 0 0 0 15.1,146.7 Z m 11.5,31.6 a 11.55,11.55 0 0 1 -23.1,0 v -16.9 a 11.55,11.55 0 0 1 23.1,0 z"/> 

<path  fill="#4BC5AE" stroke="#4BC5AE" stroke-width="2" d="m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z" >
   <!-- Анимация стрелки -->
   <animate attributeName="d"
     begin="txt.mouseover"
     fill="freeze"
     restart="whenNotActive"
     dur="1s"
     values="
           m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z;
           m 13.3,155.7 v 50.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -50.8 z;
           m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z"
           
            /> 
</path>
</svg>

Анимация стрелки слайдера по клику

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="124" height="46" viewBox="0 0 62 23" fill="#1160e8">

<!-- Закраска фона серым цветом, иначе белую стрелку будет не видно. В проекте эту строку нужно будет удалить -->
<rect width="100%" height="100%" fill="#7B7C82" />

<path
     style="fill:white;stroke:white;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4"
     d="M 2.0764927,8.0379454 H 30.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z"> 
     <!-- Анимация закраски белой стрелки в синий цвет при клике -->
   <animate attributeName="fill" begin="svg1.click" dur="0.1s" values="#000;#1160e8" fill="freeze" />  
     <animate id="stroke"   attributeName="stroke" begin="svg1.click" dur="0.1s" values="#000;#1160e8" fill="freeze" />  
     <!-- Анимация роста стрелки   -->
  <animate attributeName="d"
     begin="stroke.end"
     fill="freeze"
     restart="whenNotActive"
     dur="0.5s"
     values="
           M 2.0764927,8.0379454 H 30.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z;
           
           M 2.0764927,8.0379454 H 46.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z" /> 
</path>
</svg>

БЛОГ НА HUSL

Сделать анимацию стрелы при наведении и анимацию ссылки (удлинение)

Ответы (3 шт):

Анимация стрелки мышки

Анимация стрелки слайдера по клику