代码之家 › 专栏 › 技术社区 › Luca Reghellin

如何进行两个链式转换,第一个带转换,第二个不带转换?

css-transforms css-animations css-transitions css html

Luca Reghellin · 技术社区 · 6 年前

我需要添加两个链式转换,一个是动画的,另一个是没有动画的。类似:

transition: transform 500ms;
transform: translateX(100%);

然后,在500毫秒后:

transform: translateX(200%); // this time without any transition or, in other words, with transition time == 0ms.

因此,对象将通过动画在X轴上平移第一个100%的宽度,然后直接移动到200%的宽度,而不进行动画处理,只是简单的设置。

如何?

1 回复 | 直到 6 年前

Temani Afif 6 年前

可以使用如下动画:

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 1s forwards;
}

@keyframes change {
  50% {
    transform: translateX(100%);
  }
  50.1%, 100% { /*change right after 50%*/
    transform: translateX(200%);
  }
}

<div class="box"></div>

通过过渡,您可以考虑两个div:

.container {
  display:inline-block;
  transition:0s 0.5s transform;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition:0.5s transform;
}

body:hover .container,
body:hover .box{
  transform: translateX(100%);
}

<div class="container">
<div class="box"></div>
</div>

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

Jorge · :before和:after伪元素以接收过渡效果

6 年前

Arsalan Khattak · 线性渐变过渡

6 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

6 年前

Paul · 悬停时变换比例不缩放

6 年前

Willem van der Veen · CSS转换结合JS clickEvent

6 年前

Shanmugaraja_K · 在切换按钮中添加动画

6 年前

klode · 使用伪元素更改css转换类

6 年前

SmallTown NE · 为什么带转换的转换会导致整个页面重新绘制?

6 年前

Run · 如何使用动画限制每行的项目?

6 年前