使用CSS和HTML,创建了一个复选框,一个index和一个contentdiv.它index有一个固定的位置,浮在左边浮动.将content宽度调整到可用空间,从而取而代之index.checkbox两种状态之间的切换:
:not(:checked)将索引和内容移动到右侧.
:checked将索引和内容移动到左侧,推index离屏幕.
这些举措CSS3动画:moveindexleft,movecontentleft,moveindexright和movecontentright.
index并content有自己的animation-play-state初始设置为paused.滴答作响的checkbox改变running.这是为了防止在初始加载页面后立即播放动画.
在Firefox 42.0和Chromium 47.0.2526.80(64位)中进行测试,问题animation-play-state: paused是忽略了这个初始值.
结果:https://jsfiddle.net/Lmzyxzhs/
animation-play-stateCSS中如何初始设置paused并更改为running？
Nb:如果最初设置为animation-play-state: paused !important;,则复选框切换不会覆盖此项,禁用所有动画.
此外,单击复选框并启动动画后似乎有一点延迟.这可以优化吗？