我最近创建了一个模板，可以轻松使用CSS创建动画。
转到此GitHub存储库以使用模板：
Create CSS Animations with this Template
This HTML, CSS, and JS template makes it easy to create CSS Animations.
Define animation frames as HTML koude0 elements with the class koude1. Give each frame a unique koude2 of koude3.
<div id="frame1" class="frame">
...
</div>
<div id="frame2" class="frame" style="display: none;">
...
</div>
Hide frames after the first by adding koude4.
Change these JavaScript variables:
let seconds = 0.5;
let loop = true;
let play = true;
let numberOfFrames = 4;
- koude5: How long (in seconds) each frame displays. Default: koude6
- koude7: If the animation should loop. Default: koude8
- koude9: If the animation starts automatically. Default: koude8
- koude11: The number of frames
The koude1 class styles the frame…
创建CSS动画
使用类frame将动画帧定义为HTML <div>元素。给每个框架一个唯一的id。
<div id="frame1" class="frame">
...
</div>
<div id="frame2" class="frame" style="display: none;">
...
</div>
第一个添加style="display: none;"之后隐藏帧。
更改以下JavaScript变量：
let seconds = 0.5;
let loop = true;
let play = true;
let numberOfFrames = 4;
-
seconds：每个帧显示多长时间（以秒为单位）。默认值：0.5 -
loop：如果动画应循环。默认值：true -
play：如果动画会自动启动。默认值：true -
numberOfFrames：帧数
frame类样式的框架和边框。
模板包含：
- 一个更改动画框架的滑块
- 一个复选框要切换或解开循环（
loop） - 更改每个帧显示时间（
seconds） 的输入
感谢您阅读本文，让我知道您是否对模板有任何建议！