Javascript 第一次单击时播放关键帧动画，第二次单击时反向播放
我正在尝试完成一个波浪动画，它包含动画，填充屏幕到某个点，并在第一次单击导航菜单时停止。我尝试过让它在再次单击导航菜单时反向播放动画，但它不起作用。有人知道Java/JQuery是否可以做到这一点吗？如果可以，您是如何做到的？目前，它所做的只是一个苛刻的剪辑回到以前的状态，我不喜欢它剪辑得如此苛刻 $document.readyfunction{ $'.hb_菜单'。单击函数{ $'.line_1'。切换ClassRotate_1； $'.line_2'。切换ClassRotate_2； $'.line_3'.切换ClassRotate_2； $'.hidden_svg'.toggleClassshow_svg； $'.circ'。切换ClassRotate_circ； }; }; 身体{ 字体系列：“Raleway”，Arial，Verdana，无衬线； 溢出x：隐藏； } a{ 文字装饰：无； 颜色：白色； } .main_hd_cont{ 位置：绝对位置； 顶部：-1.25vw； 左：1.5vw； z指数：4； 颜色：白色； } .main_hd_txt{ 字体大小：3.5vw； 字体系列：“芭蕾舞与和谐芭蕾舞与和谐”； } .svg导航{ 位置：绝对位置； 排名：0； 左：0； z指数：1； 最大宽度：100vw； 宽度：100vw； } .visible_svg{ 过滤器：drop-shadow.5vw.5vw.15vw rgb0,0,0,0.6； } .hidden_svg{ 位置：绝对位置； 排名：0； 左：0； 不透明度：0； 过渡：1s； z指数：2； 滤镜：投影-.25vw.25vw.15vw rgb0,0,0,0.6； } .show_svg{ 不透明度：1； } .hb_菜单{ 最大宽度：2vw； 宽度：2vw； 最大高度：1.75vw； 高度：1.75vw； 位置：绝对位置； 右：1.5vw； 顶部：1.5vw； z指数：4； } .第1行， .第2行， .第3行{ 最大宽度：2vw； 宽度：2vw； 最大高度：.25vw； 高度：25vw； 背景色：fff； 位置：绝对位置； 右：0； z指数：2； top:0vw； 过渡期：所有； 利润底部：25vw； } .第2行{ 顶部：5vw； } .第3行{ top:1vw； } 1.轮换{ 变换：旋转45度； } .旋转2{ 变换：旋转-45度； top:0vw； } .main_nav_cont{ 最大宽度：50vw； 宽度：50vw； 最大高度：50vw； 高度：50vw； 位置 完全的 top:25vw； 左：25vw； 字体大小：1.75vw； z指数：4； } .中国保监会{ 位置：绝对位置； top:-41vw； 最大宽度：45vw； 宽度：45vw； 最大高度：48vw； 高度：48vw； 背景色：8C572B； 边界半径：14.6675vw； } .旋转_圆_1{ 左：-10vw； } .旋转_圆_2{ 左：10vw； } .旋转_圆_3{ 左：30vw； } .旋转_圆_4{ 左：50vw； } .旋转_圈_5{ 左：70vw； } .循环{ 动画：wave 15s 1缓进缓出； 动画填充模式：正向； } @关键帧波浪{ 从{ 变换：旋转360度； 最大高度：48vw； 高度：48vw； } 到{ 变换：旋转-360度； 最大高度：80vw； 高度：80vw； } } 代码咖啡屋|主页 @字体{ 字体系列：“芭蕾舞与和谐芭蕾舞与和谐”； src:url'ballet_harmony-webfont.woff2'格式'woff2'，url'ballet_harmony-webfont.woff'格式'woff'； 字体大小：正常； 字体风格：普通； } 你好，世界Javascript 第一次单击时播放关键帧动画，第二次单击时反向播放,javascript,jquery,html,css-animations,Javascript,Jquery,Html,Css Animations,我正在尝试完成一个波浪动画，它包含动画，填充屏幕到某个点，并在第一次单击导航菜单时停止。我尝试过让它在再次单击导航菜单时反向播放动画，但它不起作用。有人知道Java/JQuery是否可以做到这一点吗？如果可以，您是如何做到的？目前，它所做的只是一个苛刻的剪辑回到以前的状态，我不喜欢它剪辑得如此苛刻 $document.readyfunction{ $'.hb_菜单'。单击函数{ $'.line_1'。切换ClassRotate_1； $'.line_2'。切换ClassRotate_2； $'
代码JS部分的最后一行将单击的类添加到.circ元素中。打开该类后，第二次单击汉堡菜单图标将触发我制作的新unwave动画，只需反转原始wave动画的“往返”值即可 $document.readyfunction{ $'.hb_菜单'。单击函数{ $'.line_1'。切换ClassRotate_1； $'.line_2'。切换ClassRotate_2； $'.line_3'.切换ClassRotate_2； $'.hidden_svg'.toggleClassshow_svg； $'.circ'。切换ClassRotate_circ； $.circ.addClassclicked；//第一次单击后单击的添加 }; }; 身体{ 字体系列：“Raleway”，Arial，Verdana，无衬线； 溢出x：隐藏； } a{ 文字装饰：无； 颜色：白色； } .main_hd_cont{ 位置：绝对位置； 顶部：-1.25vw； 左：1.5vw； z指数：4； 颜色：白色； } .main_hd_txt{ 字体大小：3.5vw； 字体系列：“芭蕾舞与和谐芭蕾舞与和谐”； } .svg导航{ 位置：绝对位置； 排名：0； 左：0； z指数：1； 最大宽度：100vw； 宽度：100vw； } .visible_svg{ 过滤器：drop-shadow.5vw.5vw.15vw rgb0,0,0,0.6； } .hidden_svg{ 位置：绝对位置； 排名：0； 左：0； 不透明度：0； 过渡：1s； z指数：2； 滤镜：投影-.25vw.25vw.15vw rgb0,0,0,0.6； } .show_svg{ 不透明度：1； } .hb_菜单{ 最大宽度：2vw； 宽度：2vw； 最大高度：1.75vw； 高度：1.75vw； 位置：绝对位置； 右：1.5vw； 顶部：1.5vw； z指数：4； } .第1行， .第2行， .第3行{ 最大宽度：2vw； 宽度：2vw； 最大高度：.25vw； 高度：25vw； 背景色：fff； 位置：绝对位置； 右：0； z指数：2； top:0vw； 过渡期：所有； 利润底部：25vw； } .第2行{ 顶部：5vw； } .第3行{ top:1vw； } 1.轮换{ 变换：旋转45度； } .旋转2{ 变换：旋转-45度； top:0vw； } M 艾努导航控制{ 最大宽度：50vw； 宽度：50vw； 最大高度：50vw； 高度：50vw； 位置 完全的 top:25vw； 左：25vw； 字体大小：1.75vw； z指数：4； } .中国保监会{ 位置：绝对位置； top:-41vw； 最大宽度：45vw； 宽度：45vw； 最大高度：48vw； 高度：48vw； 背景色：8C572B； 边界半径：14.6675vw； } .旋转_圆_1{ 左：-10vw； } .旋转_圆_2{ 左：10vw； } .旋转_圆_3{ 左：30vw； } .旋转_圆_4{ 左：50vw； } .旋转_圈_5{ 左：70vw； } .循环{ 动画：wave 15s 1缓进缓出； 动画填充模式：正向； } /*此新规则仅在单击一次且已触发波浪动画后适用*/ .circ.单击：不旋转{ 动画：取消15秒1缓进缓出； 动画填充模式：正向； } @关键帧波浪{ 从{ 变换：旋转360度； 最大高度：48vw； 高度：48vw； } 到{ 变换：旋转-360度； 最大高度：80vw； 高度：80vw； } } @关键帧未移动{ 从{ 变换：旋转-360度； 最大高度：80vw； 高度：80vw； } 到{ 变换：旋转360度； 最大高度：48vw； 高度：48vw； } } 代码咖啡屋|主页 @字体{ 字体系列：“芭蕾舞与和谐芭蕾舞与和谐”； src:url'ballet_harmony-webfont.woff2'格式'woff2'，url'ballet_harmony-webfont.woff'格式'woff'； 字体大小：正常； 字体风格：普通； } 你好，世界
谢谢，有一个问题。返回动画能否与之前的动画稍有不同？我想这是可能的，只是想确定一下。当然。您可以在我添加到任何您想要的新css规则上设置动画属性。不同的时间，不同的轻松，不同的动画！