On Iphone 6 my css animations are not performant. I created this little component to mimic the passing of time.
<div class="clockface">
<div class="hand-container">
<div class="hand hand-spin" [ngClass]="{'paused': isPaused }"></div>
</div>
</div>
When I use the browser with ionic serve things look great however when I use the native app on my iphone 6 it works terribly. Is there recommendations regarding the use of animations to see good effects?
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.clockface {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-block;
background-color: black;
border-width: 1px;
margin-right: 20px;
position: relative;
z-index: 13;
opacity: 0.7;
}
.hand-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hand {
background: red;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 4%;
z-index: 100;
}
.hand-spin {
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
.paused {
background: orange;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}