how to make a rotate animation in css angular

Question

i am using angular and my question is simple how can i make to rotate this icon when i click on it?:

<div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text">
        <i class="pomrgto iconfa fas fa-chevron-circle-right view_cir" title="Ver" aria-hidden="true" (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"></i>
    </div>

the icon is the pomrgto iconfa fas fa-chevron-circle-right view_cir class, i want to do this:

When i click the icon, i want to make this rotate 90 degrees to the right making a little rotate animation, and when i click again go to the original state...

I know i can do it with css, but can you give me an idea of how can i do that?

Thank you!.

Nikola.grancharov · Accepted Answer · 2020-07-24 19:40:45Z

3

try something like this:

By default set transition property on the arrow. On click of the icon, add a new class to it (let say "active") then in CSS:

.pomrgto{
  transition: transform 1s;
 }

.active{
  transform: rotate(90deg)
}

answered Jul 24, 2020 at 19:40

Nikola.grancharov

6946 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to make a rotate animation in css angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related