Animate css loop count not correct under certain conditions?

Environment
https://play.nativescript.org
OnePlus 6

Describe the bug
Animate seems to be hard coded to a count of 2 no matter what iteration I set it to in the demo below. Be it infinite, 1, 3 100 etc.

Issue with animate css showing element only rotating 2 times when it should be infinite.
https://play.nativescript.org/?template=play-js&id=wS5S0h&v=3

If I change the keyframes to something like this then the animation is infinite but after 2 loops it reverses?!

@keyframes rotateme {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

Preferred outcome using the animate method.
https://play.nativescript.org/?template=play-js&id=icWRHz&v=1

Expected behavior
Should rotate at the value set and not fixed to a value of 2.

@7ammer

@7ammer the demo Playground project is missing (probably incorrect link)

@NickIliev

@NickIliev my bad! I've updated the link on the OP.

@7ammer

@7ammer thanks for the update. It seems that the issue is happening only on Android (on iOS it is working as expected). I've tried with final number of iterations (e.g 5) but again on Android, the animation is executed only twice.

Marking this one as a bug - keep track on the issue for further details and related information.

Steps to reproduce: Use the keyframe animation (in app.css) from the Playground demo.

Result: The animation will be executed only twice on Android

Expected: To work as it does on iOS where the animation never stops.

As an additional observation, it seems that the issue is happening only with transform

For example. if we use the following keyframe it will stop rotating but won't stop changing the color

@keyframes rotateme {
	from { background-color: red; transform: rotate(0) }
    to { background-color: green; transform: rotate(360) }
}

the same with another transform functionality as scaleX

@keyframes rotateme {
	from { background-color: red; transform: scale(2, 0) }
    to { background-color: green; transform: scale(0, 2) }
}

I have same problem. Is there any intermediate solution?

@san3k1990

@san3k1990,
If you can use the programatic solution then that would be best for now.

  let rotateElement = page.getViewById('rotate');

  rotateElement.animate({
    rotate: 360,
    duration: 1000,
    iterations: Number.POSITIVE_INFINITY,
  });

As per this SO: https://stackoverflow.com/questions/59637102/nativescript-rotate-animation-with-infinite-iteration-not-working

I've got animation-iteration-count: infinite; for rotate working on android and iOS using:

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

fix(core): animation iteration correct for android css animations and…

Navigation Menu

Repository navigation

Animate css loop count not correct under certain conditions? #7712

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Animate css loop count not correct under certain conditions? #7712

Description

Activity

NickIliev commented on Aug 30, 2019

7ammer commented on Aug 30, 2019

NickIliev commented on Aug 30, 2019

NickIliev commented on Aug 30, 2019

san3k1990 commented on Sep 11, 2019

7ammer commented on Sep 11, 2019

jamescodesthings commented on Oct 14, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions