今天主要用了动画 animation。想法来自 Twitter 上 @shuding_ 的分享[1]。实际效果:
See the Pen Fade-in animation that is not so boring by tianheg (@tianheg) on CodePen.
介绍了两种图片动画的变化效果。
#笔记
height: 100vh
和 display: flex;align-items:center;
搭配才能得到垂直居中的效果。
最关键的部分在于怎么写好 keyframes,我写的还不行,对于 filter 的使用还不够熟练。还有对于选择分割点的时机问题。
在手机上查看时,发现动画不起作用。猜测可能是 prefers-reduced-motion
,于是把它改成 prefers-reduced-motion: no-preference
。终于 work 了。
找到 MDN 上关于 prefers-reduced-motion[2] 的页面:
The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
了解到,将 prefers-reduced-motion 设置为 reduce
或者仅写 prefers-reduced-motion
都会使得浏览器减少/移除动画效果。
从 web.dev 的这篇《prefers-reduced-motion: Sometimes less movement is more》[3]可以将和动画有关的样式放到一个 CSS 文件 animations.css
里,然后这样设置:
<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">
一个 Demo: https://prefers-reduced-motion.glitch.me/
如果想强制关闭动画,可以通过 Stylus 这样的插件扩展为所有网站插入以下样式,但 风险自负 !
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
因为某些网站为了顺利加载会依赖于动画(某一步依赖于触发 animationend 事件),更激进的 animation: none !important;
不起作用。即便是以上设置也不能保证所有网站都能屏蔽掉动画(这段代码无法屏蔽通过 Web Animation API 启动的动作)。
#代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Day2 in CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>
Inspired by
<a href="https://twitter.com/shuding_/status/1552438750470340610"
>@shuding_</a
>
</h2>
<div class="containers">
<div class="container">
<p>Boring Fade-in</p>
<img
class="img-left"
src="benjamin-voros-phIFdC6lA4E-unsplash.jpg"
alt="Star"
width="400"
/>
</div>
<div class="container">
<p>Not so Boring Fade-in</p>
<img
class="img-right"
src="benjamin-voros-phIFdC6lA4E-unsplash.jpg"
alt="Star"
width="400"
/>
</div>
</div>
</body>
</html>
body {
background-color: #000;
color: #fff;
}
h2 {
text-align: center;
}
.containers {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 600px) {
.containers {
flex-direction: column;
}
}
.container {
text-align: center;
margin: 0 1rem;
}
@media (prefers-reduced-motion: no-preference) {
.container .img-left {
animation-name: fastFadein;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.container .img-right {
animation-name: slowFadein;
animation-duration: 3s;
animation-iteration-count: infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.container .img-left,
.container .img-right {
animation: none;
}
}
@keyframes fastFadein {
0% {
opacity: 1;
filter: brightness(0) blur(0);
}
100% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
@keyframes slowFadein {
0% {
opacity: 0;
filter: brightness(1) blur(20px);
}
15% {
opacity: 1;
filter: brightness(2) blur(10px);
}
}