可动画属性有哪些？

transform、opacity、color、width、height、border-radius 等。

名称

免费在线 CSS 动画生成器，免安装。生成关键帧动画，实时预览

设置

名称

持续时间 (s)

缓动

ease-out

方向

normal

迭代次数

起始状态

opacity

transform

结束状态

opacity

transform

结果

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out 1 normal;
}

预览

Box

如果这个工具帮到了你，可以请作者喝杯咖啡。

请我喝杯咖啡

名称

如何创建 CSS 动画

更多工具

评论