-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSafari animation Bug.html
152 lines (152 loc) · 3.8 KB
/
Safari animation Bug.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="hsl(0, 0%, 96%);" />
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="hsl(0, 0%, 8%);"
/>
<meta name="author" content="鬼影233" />
<meta
name="description"
content="Safari 的一个 animation Bug 以及如何解决。"
/>
<meta
name="keywords"
content="Safari, animation, Bug, delay, paused, CSS, 解决方案, 解决方法"
/>
<meta property="og:title" content="Safari animation Bug" />
<meta property="og:locale" content="zh_CN" />
<meta
property="og:url"
content="https://gui-ying233.github.io/Nest/Safari%20animation%20Bug"
/>
<meta property="og:site_name" content="鬼影的基地" />
<meta
property="og:description"
content="Safari 的一个 animation Bug 以及如何解决。"
/>
<meta property="og:type" content="article" />
<meta property="article:author" content="鬼影233" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Safari animation Bug" />
<link
rel="canonical"
href="https://gui-ying233.github.io/Nest/Safari%20animation%20Bug"
/>
<link rel="icon" type="image/x-icon" href="src/asset/favicon.ico" />
<link rel="apple-touch-icon" href="src/asset/favicon.ico" />
<title>Safari animation Bug - 鬼影的基地</title>
<script async src="src/js/clarity.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-ZMHY61ZCQE"
></script>
<script async src="src/js/gtag.js"></script>
<script
async
src="https://hm.baidu.com/hm.js?abdce5cc5a81bdfb51506edb4641e824"
></script>
<link rel="stylesheet" href="src/css/base.css" />
<script type="speculationrules">
{ "prerender": [{ "urls": ["."] }] }
</script>
</head>
<body>
<h1>Safari animation Bug</h1>
<h2>前言</h2>
<p>没啥好说的，众所周知 Safari 作为新时代 IE，Bug 一大堆。</p>
<p>另，本人未提报此 Bug。为什么？因为它是 Safari。</p>
<h2>实例</h2>
<pre data-lang="css">
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spin {
transform: rotate(0deg);
animation: spin 10s linear infinite forwards paused -2s;
}</pre
>
<style>
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spin {
width: 100px;
height: 100px;
background-color: var(--foreground-color--2);
transform: rotate(0deg);
opacity: 1;
animation: spin 10s linear infinite forwards paused -2s;
}
</style>
<div class="spin"></div>
<h2>简介</h2>
<p>
只是一个简单的被暂停的动画，但是在 Safari 上动画不会暂停在 -2s
的位置，而是 0s 的位置。
</p>
<h2>解决方案</h2>
<h3>方案一</h3>
<pre data-lang="css">
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spin {
animation: spin 10s linear infinite forwards paused -2s;
}</pre
>
<p>更加简单但可能不适用一些情况。</p>
<h3>方案二</h3>
<pre data-lang="css">
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spin {
animation: spin 10s linear infinite forwards paused -2s;
}</pre
>
<p>适用于更多情况，但代码可能更多。</p>
<h3>方案三</h3>
<pre data-lang="css">
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes fade-in {
to {
opacity: 1;
}
}
.spin {
transform: rotate(0deg);
opacity: 0;
animation: spin 10s linear infinite forwards paused -2s,
fade-in 1s ease-out forwards;
}</pre
>
<p>
增加另一个 <code>animation-play-state</code> 为
<code>running</code> 的动画。
</p>
<footer>
<a href=".">鬼影的基地</a>
</footer>
</body>
</html>