CSS揭秘之过渡与动画

缓动效果

弹跳动画

  @keyframes bounce{
      60%,80%,to{
          transform:translateY(350px);
          /* animation-timing-function:ease-out; */
      }
      70%{
          transform:translateY(250px);
      }
      90%{
          transform:translateY(300px);
      }
  }
  .ball{
      animation:bounce 3s  infinite;
      background:url('./boy.png');
      width:210px;
      height:200px;
      margin:0 auto;
  }

或者

   @keyframes bounce {
        60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease;
        }
        70% { transform: translateY(300px); }
        90% { transform: translateY(360px); }
    }
  .ball {
  /* 外观样式 */
  animation: bounce 3s cubic-bezier(.1,.25,1,.25);
  }

弹性动画

    input:not(:focus) + .callout{
        transform: scale(0);
    }
    .callout{
        transition:.5s transform;
        transform-origin:1.4em -.4em;
        display:inline-block;
        position:absolute;
        left:125px;
        top:50px;
        background:yellowgreen;
    }

闪烁效果!

    @keyframes blink-smooth{
        50%{
            color:transparent;
        }
    }
    .highlight{
        animation:1s blink-smooth 3 steps(1);
        background:yellowgreen;
    }

打字动画

    @keyframes typing {
        from { width: 0 }
    }
    @keyframes caret {
        50% { border-color: transparent; }
    }
    h1 {
        width: 15ch; /* 文本的宽度 */
        overflow: hidden;
        white-space: nowrap;
        border-right: .05em solid;
        animation: typing 6s steps(15),
        caret 1s steps(1) infinite;
    }

状态平滑的动画

@keyframes panoramic {
        to { background-position: 100% 0; }
    }
     
    #scenery{
        background:url('./fj.jpg');
        background-size:auto 100%;
        width:200px;
        height:200px;        
        animation: panoramic 10s linear infinite alternate;
        animation-play-state: paused;
    }
    #scenery:hover, #scenery:focus {
        animation-play-state:running;
    }

沿环形路径平移的动画

<div class="path">
    <img src="girl.jpg" class="avatar" />
</div>

   @keyframes spin{
        to{
            transform:rotate(1turn);
        }
    }

    .path{
        width:200px;
        height:200px;
        border-radius:100px;
        background:#ffce07;
        position:relative;
    }
    .path img{
        width:40px;
        height:40px;
        border-radius:20px;
        position:absolute;
        top:5px;
        left:50%;
        margin-left:-20px;        
        animation:spin 3s infinite linear;
        transform-origin:50% 100px;
    }