CODEWITHSUNDEEP
htmlcssangular
Luis Bermúdez
Luis Bermúdez

Reputation: 654

how to make a rotate animation in css angular

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:

enter image description here

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...

enter image description here

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

Thank you!.

Upvotes: 0

Views: 1243

Answers (1)

Nikola.grancharov
Nikola.grancharov

Reputation: 672

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)
}

Upvotes: 3

Related Questions