Css3 stop after finishing the rotation?

Use jQuery so that the hover element does not return to its originality when the mouse exits:

Reading some comments, let's go to the issues!

$('.openn').hover(function(){

   $(this).css('transform', 'rotate(90deg)');

});

Remembering that you must include the jQuery library for this to work (if it is not already included) .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.hover()isaneventthatisabletocombineeventsmouseenter()andmouseleave(),thisiswritten here . (The famous two rabbits on one stone). This makes it easier for us to write code, and we have the power to manipulate events the way we want. An example of handling the two events:

$('.l').hover(function(){


 $(this).css('border-radius','50%');

},function(){

  $(this).css('background-color','white');
  $('body').css({'transform':'rotateY(-180deg)','background-color':'black'});
  
  
  
})

.l{

  padding: 5px;
  transition: 0.5s;
  width: 100px;
  height: 100px;
  background-color: yellow;

}

.openn{
   transition: transform 0.3s ease-in
 }


body{transition: 2s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='l'></div>

The advantage of using .hover() is that we can manipulate any element of the page, without the need to manually declare the two events that would do this service. It is similar to :hover of CSS but infinitely more powerful since we are not stuck with just one element and its originality.

With Jquery

Using this way, as in the other answer will make all elements that have the class="openn" class to be affected, which can be a great headache:

$('.openn').hover(function(){
   // afeta TODOS os elementos com classe openn de uma vez
   $('.openn').css('transform', 'rotate(90deg)');
});

Then use this , because if you have more than one element with class .openn all elements will be affected instead of affecting only with hover .

$('.openn').hover(function(){
   // afeta somente o elemento que disparou o evento, não afetando os outros elementos com classe openn
   $(this).css('transform', 'rotate(90deg)');
});

Another detail might be preferable to use a CSS class with the name .hover (not to be confused with :hover ), because then the CSS animation gets organized inside the same CSS instead of mixing with JavaScript. p>

$(document).on('mouseover', '.openn', function() {
   $(this).addClass("hover");
});

.openn{
    width: 32px;
    height: 32px;
    transition: transform 0.5s ease-in;
}
.openn.hover{
    transform: rotate(90deg);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>
<br>
<br>
<br>
<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>

With pure JavaScript

Importing jQuery just for a simple effect of this is totally unnecessary, if you do not use jQuery, you can simply do this:

function classOpenn() {
    this.classList.add("hover");
}

var openns = document.querySelectorAll('.openn');

for (var i = 0, j = openns.length; i < j; ++i) {
    openns[i].addEventListener("mouseover", classOpenn);
}

.openn{
    width: 32px;
    height: 32px;
    transition: transform 0.5s ease-in;
}
.openn.hover{
    transform: rotate(90deg);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>
<br>
<br>
<br>
<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>

Although the question does not mention the jquery or javascript tags, one solution is to detect by jQuery when the transition is finished and the style of the element is changed:

Using jQuery:

$(".openn")
.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(){
	$(this).css('transform','rotate(90deg)');
});

.openn{
	transition: transform 0.5s ease-in; 
}
.openn:hover{
	transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="openn" style="display: block; width: 100px; height: 100px; background: red;">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>