I created a 3D truck using HTML and CSS. The truck tires rotate 360 degrees if a variable (x) is true. If x is false, the rotation of the truck tires stops. This was achieved in CSS by setting the rotation to infinite.
.wheel {
animation: round 2s infinite linear;
}
@keyframes round {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
The CSS code works but does not stop the rotation based on the variable. I have decided to use Angular Animations instead:
animations: [
trigger('x',[
state('true', style({
transform: 'rotate(360deg)'
})),
transition('* => *', animate('2s'))
])
]
The truck's tires are rotating for only 2 seconds. Is there a way to make it rotate infinitely in Angular6? I am looking for an infinite rotation, not just 2 seconds. Any help would be greatly appreciated. Thank you...