如何在Stylus中使用@keyframes定义动画效果？

在本文中，我们将学习如何使用Stylus的@keyframes关键字来定义动画效果。

步骤一：安装Stylus

$ npm install stylus -g

步骤二：创建样式文件

$ touch style.styl

步骤三：定义动画

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

步骤四：使用动画

body {
  animation: move 2s infinite;
}

通过以上四个步骤，我们可以在Stylus中定义并使用动画效果。

希望本文对小白学习Stylus动画有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何在Stylus中使用map处理键值对数据？
• 下一篇： 如何在Stylus中使用!default设置变量默认值？