I want to rotate label with infinite iteration, currently it is working fine on iOS devices but on android it only rotates for 2 sec and then stop.

Below is my CSS code

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.spin {
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

<Label text="rotate value" class="fas spin"></Label>

I want to rotate label with infinite iteration, currently it is working fine on iOS devices but on android it only rotates for 2 sec and then stop.

Below is my CSS code

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.spin {
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

<Label text="rotate value" class="fas spin"></Label>

• javascript
• android
• typescript
• webview
• nativescript

• NativeScript doesn't support Java annotations, so you will have to write the WebInterface in Java library project and use it in your JS / TS code. Most of the functionalities in this case are already covered by nativescript-webview-ext plugin, you could try that. – Manoj Commented Jan 8, 2020 at 15:06
• @Manoj I am new in Nativescript, I have added this plugin in project but enable to run any of the functionality. Is there any sample project which has implementation of this plugin. – vinita jain Commented Jan 8, 2020 at 21:10
• Just refer the docs, I haven't used the plugin personally but I think you will call emit method on bridge from your webpage and listen to same in your code. – Manoj Commented Jan 8, 2020 at 22:17
• It's exactly nsWebViewBridge.emit(eventName, dataToEmit) from your web page. – Manoj Commented Jan 9, 2020 at 3:05
• @Manoj Thank You so much, Appreciate it. One question this bridge is used on both webpage and mobile app code to set a munication right? – vinita jain Commented Jan 9, 2020 at 16:30

1 Answer 1

I'm not sure if its a bug, can't expect {N} to be inline with Browsers as we are dealing with native elements here. The hack below seems to work,

@keyframes rotate {
    0% {transform: rotate(0deg);}
    99.9% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
}