代码之家 › 专栏 › 技术社区 › Henfs

同一动画是否可以有不同的过渡?

css-transitions css-animations css

Henfs · 技术社区 · 4 年前

我希望每个样式状态的更改都有不同的转换值。

但是,使用 transition 里面 @keyframes

.square {
  background-color: #333;
  height: 100px;
  width: 100px;
  animation: 4s move infinite;
}
@keyframes move {
  0% {
    transition: ease-in;
  }
  50% {
    transform: translate(100%);
    transition: ease-out;
  } 100% {
    transform: translate(0);
    transition: cubic-bezier(0.25, 0.1, 0.6, 1.8);
  }
}

<div class="square"></div>

我想知道是否有一种方法可以让动画的每个阶段都有不同的过渡,而不必组合多个 animation 在包裹的元素中。

1 回复 | 直到 4 年前

Afrophysics 4 年前

这个 transition 属性不在关键帧内执行任何操作。你可以使用属性指定选择器/变换(即,默认值和 :hover ),或者可以使用关键帧指定它如何随时间范围(即, from to ,或 0% , 50%, 100% 等等)。

当你仔细想想,它们是表达相同信息的两种不同方式。

你可以 animation-timing-function 如果要对过渡进行更多控制,请在各个关键帧中使用属性。要知道直到2015年左右,Safari(iOS/OSX)才支持它,所以如果需要支持这些版本,可能会遇到麻烦。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前