css动画-方块

css动画

 * {
        padding: 0;
        margin: 0;
      }
      body {
        width: 100vw;
        height: 100vh;
        background-color: #2c3e50;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main {
        width: 100px;
        height: 100px;
        background: #fff;
        animation-name: hd;
        animation-duration: 2s;
      }

      @keyframes hd {
        0% {
          background: #000;
        }
        25% {
          transform: scale(2);
        }
        65% {
          transform: scale(1);
        }
        100% {
          background: #e74c3c;
        }
      }

• flex布局
• 颜色选取网站
• 简单动画

• 定义动画**@keyframes name**
• 动画形式animation-name

成果

• 不设置起始或者终点帧，系统用元素默认状态来展示

 @keyframes hd {
        25%{
          transform: translateX(300px);
        }
        50%{
          transform: translate(300px,300px);
        }
        75%{
          transform: translateY(300px);
        }

让小方块沿着周围运动，起始位置和默认位置不用加动画帧，直接用默认的