无涯教程网

Html 如何在CSS中延迟触发2个转换

发布于10月05日

我正在制作一个有3个条的菜单按钮(有时被称为汉堡包按钮)，当点击时它会变成一个X.我不知道如何在一个元素中触发两个变换，而不是在动画中同时触发它们.

这个脚本是可行的，但它们同时触发:

transform: translate(10px, 10px) rotate(45deg);

我的目标是完成翻译，然后开始旋转.(我需要使用过渡，因为它们是防垃圾邮件的、未舔关键帧的动画.)我try 过的一件事是将如下所示的内容改为:

transform: translate(10px, 10px);
transform: rotate(45deg);

但只有最下面的那个会被激活.为了解决这个问题，我添加了以下内容:

transition: transform 0.4s 0.4s, rotate 0.4s 0.4s;

混合，但这只增加了一个转换的延迟，仍然留下了另一个破碎.我的最后一个 idea 是用rotate(deg)代替translate(px)，但似乎没有一种方法可以将旋转居中.我可以张贴我的完整代码，如果需要.

推荐答案

使用translate和rotate作为单独的css属性:

.foo {
  transition: translate 1s 1s, rotate 1s 0s;
}

.foo:focus {
  transition: translate 1s 0s, rotate 1s 1s;
  translate: 10px 10px;
  rotate: 45deg;
}

<button class="foo">Focus me for a demo</button>

Html相关问答推荐

打印pdf时100 vh迪夫有半页高

如何打破长URL，包含连字符在HTML与CSS

如何格式化HTML文本，使其环绕关键字

D3.js—分组条形图—更新输入数据时出错

CSS自定义特性中的URL是否可以相对于定义的CSS文件？

如果浏览器通过http接收html，为什么客户端内置表单验证不起作用？

在每个列宽由带有固定值的minmax()函数定义的网格中，CSS如何为列分配空间？

阴影部分内部的ionic Select 元素

使用不同字体对齐元素

顶部有文字的图像的悬停效果

如何使单选按钮在被 Select /选中时看起来像这样的设计？

网格布局中的组件

当浏览器宽度减小时字体大小变得太大

使用简单的 HTML 设计公司徽标和文本

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中？

表格中每 4 行条纹一次

防止 HTML 表格在 Quarto 中使用全页宽度

CSS 斜角与 3 行对齐

我怎么能有：not(.class)：nth-of-type(even)？

网站页脚中的 Quarto 安装版本

实用课程推荐

相关教程推荐