After using @Keyframes css-animation and setting the rotation to 360 degrees it will reset to 0 in different ways in Android and in iOS. In iOS it will make an additional 360 degree spin...
Code to reproduce - create the sample app with tns create myApp
Add the following :
in app.css
@keyframes rotate-element {
0% {transform: rotate(0);}
25% {transform: rotate(90);}
50% {transform: rotate(180);}
75% {transform: rotate(270);}
100%{transform: rotate(360);}
}
.clockwise {
animation-name: rotate-element;
animation-duration: 3s;
animation-iteration-count: infinite;
}
in main-page.xml
<Image src="res://icon" stretch="none" class="clockwise" />
result
Screen Capture 0.mov.zip
SO user has also experienced a different behavior with the same code here
Reactions are currently unavailable
After using @Keyframes css-animation and setting the rotation to 360 degrees it will reset to 0 in different ways in Android and in iOS. In iOS it will make an additional 360 degree spin...
Code to reproduce - create the sample app with tns create myApp
Add the following :
in app.css
@keyframes rotate-element { 0% {transform: rotate(0);} 25% {transform: rotate(90);} 50% {transform: rotate(180);} 75% {transform: rotate(270);} 100%{transform: rotate(360);} } .clockwise { animation-name: rotate-element; animation-duration: 3s; animation-iteration-count: infinite; }in main-page.xml
result
Screen Capture 0.mov.zip
SO user has also experienced a different behavior with the same code here