jqueryかcssのanimationで画像をループさせたい

前提・実現したいこと

cssのanimationを使って画像がループする処理を作っています。
また、その画像をクリックするとpaused、もう一度クリックするとrunningと切り替わるようにしています。

発生している問題・エラーメッセージ

PCとandroidでは想定通りに動作するのですが、
iosで画像をタップしてもanimationが止まってくれません。
※iPhone8 ios11.4で確認

該当のソースコード

http://99940.playcode.io/

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>Document</title>
8	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
9	<script>
10		$(function() {
11			$('ul').on('click', function() {
12				if($('ul').hasClass('pause')) {
13					$('ul').css({animationPlayState:'running'});
14				} else {
15					$('ul').css({animationPlayState:'paused'});
16				}
17				$('ul').toggleClass('pause');
18			});
19		});
20	</script>
21	<style>
22		div {
23			overflow: hidden;
24		}
25		ul {
26			display: flex;
27			flex-wrap: nowrap;
28			align-items: center;
29			-ms-flex-align: center;
30			animation: anim1 10s linear 0s infinite running;
31			margin: 0;
32			padding: 0;
33		}
34		li {
35			flex: 0 0 auto;
36  		display: block;
37			cursor: pointer;
38		}
39		ul.pause {
40
41		}
42	</style>
43	<style id="anim1">
44		@keyframes anim1
45		{
46			from {
47				transform: translate3d(0,0,0);
48			} to {
49				transform: translate3d(-750px,0,0);
50			}
51		}
52	</style>
53</head>
54<body>
55
56	<div>
57		<ul>
58			<li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
59			<li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
60			<li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
61			<li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
62			<li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
63			<li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
64			<li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
65			<li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
66			<li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
67			<li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
68			<li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
69			<li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
70			<li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
71			<li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
72			<li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
73			<li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
74			<li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
75			<li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
76			<li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
77			<li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
78		</ul>
79	</div>
80
81</body>
82</html>

自力で調べましたが、同様の現象を見つけることができませんでした。
ご教授いただけますでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

はっきりとはわかりませんでしたがtransform系でのバグのような情報がちらほら有りました。
https://discussions.apple.com/thread/6762081
https://www.sitepoint.com/community/t/css-animation-problem-in-safari/277963/2

移動をtransform:translate()ではなく、left にしたらiosでも正常に動作しました。

<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script>
    $(function() {
      $('ul').on('click', function() {
        $('ul').toggleClass('pause');
      });
    });
  </script>
  <style>
    div {
      overflow: hidden;
    }

    ul {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      -ms-flex-align: center;
      animation: anim1 10s linear 0s infinite running;
      margin: 0;
      padding: 0;
      position: relative;  // <-追加
    }

    li {
      flex: 0 0 auto;
      display: block;
      cursor: pointer;
    }

    ul.pause {
      animation: anim1 10s linear 0s infinite paused !important;
    }
  </style>
  <style id="anim1">
    @keyframes anim1 {
      from {
        left: 0  // <-変更
      }
      to {
        left: -750px  // <-変更
      }
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/ffffff/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/eeeeee/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/dddddd/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/cccccc/993333/150x150.png" alt=""></li>
      <li><img src="http://placehold.jp/24/bbbbbb/993333/150x150.png" alt=""></li>
    </ul>
  </div>

</body>

</html>

投稿2018/07/12 01:01