Bruce Song首页首页文档文档常用常用链接链接项目项目关于我关于我WikiWiki (opens in a new tab)
GitHubGitHub (opens in a new tab)
  • Get Started
  • Web Tech Related
  • HTML
    • CSS
      • Transition
        • 背景图片的 Transition
      • Animation
        • 自定义动画
    • JavaScript Related
    • JavaScript
      • TypeScript
        • Packages
          • nprogress
        • Vue Related
        • Vite
          • Config
        • Developer Skills
        • Git
          • 配置
          • 工作流
          • CRLF 和 LF 冲突
          • 工作树
        • OS
          • Windows
            • 装机设置
          • macOS
            • 装机设置
        • Front End Engineering
          • 代码规范
          • 提交信息规范
        • 首页
        • 文档
          • Get Started
          • Web Tech Related
          • HTML
            • CSS
              • Transition
                • 背景图片的 Transition
              • Animation
                • 自定义动画
                  • Tada
            • JavaScript Related
            • JavaScript
              • TypeScript
                • Packages
                  • nprogress
                • Vue Related
                • Vite
                  • Config
                • Developer Skills
                • Git
                  • 配置
                  • 工作流
                  • CRLF 和 LF 冲突
                  • 工作树
                • OS
                  • Windows
                    • 装机设置
                  • macOS
                    • 装机设置
                • Front End Engineering
                  • 代码规范
                  • 提交信息规范
              • 常用
              • 链接
              • 项目
              • 关于我
              • Wiki (opens in a new tab)

              On This Page

              • Tada
              Question? Give us feedback → (opens in a new tab)Edit this page
              文档
              CSS
              Animation
              自定义动画

              自定义动画

              Tada

              .css
              .tada {
                animation: tada infinite 2s;
              }
               
              @keyframes tada {
                0%,
                100% {
                  transform: rotate(0);
                }
                10%,
                30%,
                50%,
                70%,
                90% {
                  transform: rotate(-3deg);
                }
                20%,
                40%,
                60%,
                80% {
                  transform: rotate(3deg);
                }
                100% {
                  transform: rotate(0);
                }
              }
              Last updated on January 10, 2023
              背景图片的 Transitionnprogress

              Bruce Song