learnshare

@xiaohantx
@cmdOptionKana
没错，来回播放可以修改关键帧，或者设置动画来回播放；按需启动可以使用 JS 修改元素的 class

看起来是要做滚动动画，两个 div 放完全一致的内容，然后实现循环滚动的效果？

这种状况通常建议使用 transform: translate*() 的 animation 实现，具体来讲是
1. 三层结构：外部容器 > 内部容器（ transform 的目标） > 滚动内容（重复多次）
2. 定义动画：内部容器 translate* 0~-50%（第二个值 = 100% / 内容重复次数）
3. 重复播放

并不需要考虑 DOM 的删除和插入，这么做反而需要复杂的位置计算和处理逻辑。

参考示例 https://codepen.io/web-app-dev/pen/BaLzJeB

示例中可以看到，每个动画周期结束后，瞬间跳回了第一帧（ 1-2 切换为 1-1 ）

1. 买什么、做什么、验收标准自己要清楚
2. 尽量自己监工，其他任何人都靠不住
3. 水、电、暖、网得保证 20~30 年的稳定可靠，别不舍得花钱

可以明确的是 *个人信息不安全*，哪怕真的用权威厂商的人脸识别服务，信息也会多存一份，可查看的人也会比较多


我们小区最近也上了，本地的服务商，5 年多的小公司而已（或许设备和服务都是免费提供也说不准）。技术水平和安全性能有多高，用脚趾头也能想得到
好在没敢强推，还可以刷卡进门。否则，要么每次喊门卫开，要么法院见

小地方的人不懂什么是个人隐私，不明白泄露之后有什么风险，顶多烦了骂两句，刷卡、指纹或刷脸都能接受
等相关法律法规的健全可能还不够，需要有人站出来维护一下自己的权力才行

我猜测这波人脸识别门禁是个创业新方向？那大概 1~3 年都会关门的
（诸位 ofo 的押金退了吗？）

@learnshare 大概被人讨厌的地方是大量冗余代码，以及 !important 的使用？

```css | https://tailwindcss.com/_next/static/css/0c17db1ebca8cc8f7205.css
.border-0 {
border-width: 0!important
}

.border-2 {
border-width: 2px!important
}

.border-4 {
border-width: 4px!important
}

.border-8 {
border-width: 8px!important
}
```

Tailwind 和 Bootstrap 都是对 CSS （或者 UI 绘制命令）的一种包装形式而已
前者更细碎，后者更简洁。好不好没法评价，看个人口味

如果能保证开发效率、代码质量、可维护性以及 dist 尽量小，怎么玩都可以（ Web 就是这么自由和散乱的平台

纠结的原因通常是项目没有一套设计规范、UI 样式库或组件库，否则谁还关注业务逻辑以外的问题

先 HTML 、CSS 、JavaScript 、DOM 学起吧
先搞明白基本功能，哪些东西该用什么做、怎么做
再上手 React 几天就能成了

@learnshare 对比的基本单位肯定是行，所以错位的行都算作差异