Hi,
I am using css3 keyframes having few transform properties like scale, rotate etc. Animations are playing/pausing fine across the browsers and devices except with iPad where animations-play-state : 'paused'; doesn't work with keyframe animations having transform properties.
Issue is persistent in chrome and safari browsers and all the versions of iPad. Please find the code from jsfiddle which I am using.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Codrops-Demo</title>
<style>
.container {
margin: 20px auto;
max-width: 700px;
}
.element {
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #009966;
top: 0;
-webkit-animation: bounce 2s infinite linear;
animation: bounce 2s infinite linear;
}
.paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes bounce {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes bounce {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="element" id="element"></div>
<span><button id="pasue">Pause</button></span>
<span><button id="play">Play</button></span>
</div>
<script>
var buttonPause = document.getElementById('pasue'),
buttonPlay = document.getElementById('play'),
el = document.getElementById('element');
buttonPause.onclick = function () {
el.style.animationPlayState = 'paused';
}
buttonPlay.onclick = function () {
el.style.animationPlayState = 'running';
}</script>
</body>
</html>
Thanks
Roshan
