ANIMATION > ANIMATABLE PROPERTIES

CSS Transforms

Animate CSS transforms individually.

Transform example
JavaScript
HTML
CSS
xjs('.box').animate({ translateX: 100, rotate: '1turn', scale: 0.5 });
<div class="box"></div> 
.box {
  width: 50px;
  height: 50px;
  background-color: var(--highlight-color);
  border-radius: 4px;
}
.demo-visual {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}
功能说明：把 transform 拆成独立属性（translate/rotate/scale 等）进行动画，组合时会自动合并到最终 transform。