Css Arrow Transition

Css 3 transition between arrows

Well, hope this help. I did it by insert another pseudo class onhover of your right class.

.right:hover:before {
    content: '';
    height: 0.5em;
    width: 1.4em;
    background-color: #333333;
    display: inline-block;
    transform: translate(6px,-6px);
    max-width: 2em;
    transition: 0.5s all ease-in-out;
}
.right:before {
    content: '';
    transition: 0.5s all ease-in-out;
    max-width: 0em;
}

If you insert this, you must remove .right:hover. Check this pen.

Animation to translate right arrow

Right now you have multiple transforms, which causes only the last one(translate) to take effect, as well as defaulting the rotate back to 0. What you need to do is combine rotate and translate into a single transform:

i {    border: solid black;    border-width: 0 3px 3px 0;    display: inline-block;    padding: 3px;}
.right {    transform: rotate(-45deg);    -webkit-transform: rotate(-45deg);    transition: transform 400ms ease !important;}
.link-page-1 p {            cursor:pointer;}
.link-page-1:hover p {    color: #727272 !important;
}
.link-page-1:hover .right  {    transform:rotate(-45deg) translate(10px,0px);    -webkit-transform:rotate(-45deg) translate(10px,0px);}

<p class="link-page-1" style="font-size:20px; color:black;">En savoir plus  <i class="arrow right"></i></p>

How to make arrow transition on button:hover instead of span:hover?

You have a transition issue since it is defined only for the hovered arrow. If you move it to .arrow itself the transition is working in both directions. And if you want the "animation" take effect when the button is hovered then define :hover for the button.

Working example:

button {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 22.6px;
  background-color: transparent;
  padding: 16px 32px 16px 40px;
  cursor: pointer;
}

.btn-black {
  border: 4px solid #000000;
  color: #000000;
}

.btn-grey {
  border: 4px solid #45423C;
  color: #45423C;
}

.arrow {
  height: 2px;
  width: 25px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 15px;
  margin-bottom: 4px;
  transition: all .4s ease;
}

button:hover .arrow {
  width: 35px;
  margin-right: 5px;
}

.arrow-black {
  background: black;
}

.arrow-grey {
  background: #45423C;
}

.arrow:before,
.arrow:after {
  content: "";
  background: black;
  position: absolute;
  height: 2px;
  width: 10px;
  border-radius: 30%;
}

.arrow:before {
  right: -2px;
  bottom: -3px;
  transform: rotate(-45deg);
}

.arrow:after {
  right: -2px;
  top: -3px;
  transform: rotate(45deg);
}

<button class="btn-black">
  <span class="arrow arrow-black"></span>
  WHO WE ARE
</button>

How to rotate arrow icon in left side? Without rotate all icon ? Only css

You need to add the rotation in the :active class too:

  &:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(180deg);
  }

So the rotation keeps taking effect.

Example: CodePen

CSS Arrow Opacity Transition

To accomplish this I added the following:

#menu li a:after {
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#menu li:hover a:after {
  border-bottom: 0.6em solid #1c525a;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

See the jsFiddle - I'm sure this code can be cleaned up or bested, but I didn't find an example/answer of this on Stack Overflow yet so I thought I would add this.