.animated-arrow {
margin-top:41px;
font-weight: 600;
}
.the-arrow {
width: 64px;
transition: all 0.2s;
}
.the-arrow.-left {
position: absolute;
top: 50%;
left: 0;
}
.the-arrow.-left > .shaft {
width: 0;
background-color: #686868;
}
.the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
width: 0;
background-color: #686868;
}
.the-arrow.-left > .shaft:before {
-webkit-transform: rotate(0);
transform: rotate(0);
top:0;
}
.the-arrow.-left > .shaft:after {
-webkit-transform: rotate(0);
transform: rotate(0);
top:0;
}
.the-arrow.-right {
top: 0;
}
.the-arrow.-right > .shaft {
width: 64px;
transition-delay: 0.2s;
}
.the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
width: 8px;
transition-delay: 0.3s;
transition: all 0.5s;
}
.the-arrow.-right > .shaft:before {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.the-arrow > .shaft {
background-color: #686868;
display: block;
height: 1px;
position: relative;
transition: all 0.2s;
transition-delay: 0;
will-change: transform;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
background-color: #686868;
content: '';
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.2s;
transition-delay: 0;
}
.the-arrow > .shaft:before {
-webkit-transform-origin: top right;
transform-origin: top right;
}
.the-arrow > .shaft:after {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
text-decoration: none;
position: relative;
transition: all 0.2s;
margin-bottom: 30px;
}
.animated-arrow:hover {
color: #686868;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: #686868;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: #686868;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
width: 0;
-webkit-transform: translateX(200%);
transform: translateX(200%);
transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
width: 0;
transition-delay: 0;
transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.animated-arrow > .main {
display: flex;
align-items: center;
transition: all 0.2s;
}
.animated-arrow > .main > .text {
margin: 0 16px 0 0;
line-height: 1;
}
.animated-arrow > .main > .the-arrow {
position: relative;
}