使用 CSS 和 JavaScript 制作动画计时器
自学
我在 General Assembly 的时光即将结束，直接的教学指导越来越少，更多的是鼓励我们在广阔的 Web 开发领域自由探索。最近，我们甚至专门用了一整天的时间自学 GA 课程之外的其他编程语言或技能。
我选择创建一个带有 CSS 动画的 JavaScript 计时器。
我为什么选择这个科目？
我的毕业设计项目有一个想法，如果通过 JavaScript 触发 CSS 动画，视觉效果会大大提升。
它解决了什么问题？/ 为什么人们会使用它？
它与其说是解决了问题，不如说是有可能让现有项目在美学上更吸引用户。
赏心悦目的视觉效果使用户界面更容易理解和操作，也更容易向潜在买家或用户销售。
还有哪些替代方案？
我的网站几乎没有任何样式，或者是一个静态网页，唯一活动的元素是 JavaScript 计时器，这看起来可能相当不吸引人或乏味。
自学
第一步——制作计时器。
幸运的是，互联网信息浩瀚，提供了许多 JavaScript 计时器的示例。我使用了w3schools上的一个示例，并根据我的需求进行了修改（从 1 分钟开始倒计时）。
注意：我还设置了计时器归零后 1 分钟重新启动，以确保动画在页面加载过程中多次播放。
第二步——添加基本CSS样式。
确定倒计时器的静态版本应该是什么样子，并定义所有必要的类。（这很简单。）
第三步——学习动画制作。
动画与转场
过渡效果应用于元素，并指定在一段时间内逐渐发生的变化。
动画会在后台运行，而不管用户或网站其他部分发生什么。
这时我才意识到，整个项目的名称（用 CSS 和 JavaScript 制作动画计时器）是个谎言。我实际制作的是用 CSS 和 JavaScript 制作的过渡计时器。
第四步 - 添加独立于 JavaScript 的动画
我可以在 CSS 代码中添加一个 div 元素，使其在指定时间内缩小。
.visual-timer {
border-top: 50px solid #004D00;
margin: 5% auto;
width: 50%;
}
.width-change {
/* Animation code */
-webkit-animation-name: widthChange; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 60s; /* Safari 4.0 - 8.0 */
animation-name: widthChange;
animation-duration: 60s;
}
@keyframes widthChange {
from {width: 600px;}
to {width: 0px;}
}
第五步 - 将动画的开始与 JS 函数的开始连接起来
通过visualTimer.classList.add("width-change");在函数开头添加代码，我可以在倒计时开始时启动动画。但是，它只能运行一次，之后在倒计时重置时不会再次启动。
这个问题很容易解决，只需visualTimer.classList.remove("width-change");在计时器重置时添加代码，允许函数在循环执行时重新初始化动画即可。
在研究过程中，你遇到的最大概念性障碍（如果有的话）是什么？
这时，我仍然对动画与倒计时不符的情况感到不满。动画播放不一致，有时倒计时还剩30秒时，动画已经播放过半了。
但后来我找到了另一种方法来分解动画，使其播放速度放慢。
@keyframes widthChange {
0% {width: 600px;}
25% {width: 450px;}
50% {width: 300px;}
75% {width: 150px;}
100% {width: 0px;}
}
这样一来，当计时器显示30秒时，动画播放到一半就结束了。但是，宽度变化的速度仍然不如我预期的那样稳定。
在学习过程中，哪些文章或论坛对你最有帮助？
https://css-tricks.com/controlling-css-animations-transitions-javascript/
https://www.sitepoint.com/css3-animation-javascript-event-handlers/
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/howto/howto_js_add_class.asp
https://gomakethings.com/two-ways-to-set-an-elements-css-with-vanilla-javascript/
为了未来
除了动画效果更加流畅之外，我还希望动画持续时间能根据计时器的变化而变化。也就是说，如果计时器变长或变短，动画速度也会相应加快或减慢。
我想到的一些解决方案是集成 SASS，或者直接在 JavaScript 中构建样式，并将持续时间设为变量。如果大家有什么建议，欢迎提出！