CSS3 實現多個動畫效果

利用 CSS3 實現動畫效果

內容

• 皮球掉地上反彈起來

• 純 CSS 實現 gif 效果

• 圖片移動

• 實現打字輸入效果

效果

// html

<div class="ball"></div>

//css

@keyframes bounce {
60%, 80%, to {
  transform: translateY(400px); 
  animation-timing-function: ease;        
  }        
  70% { transform: translateY(300px); }        
  90% { transform: translateY(360px); }
}

.ball {
    width: 50px;        
    height: 50px;        
    border-radius: 50%;
    margin: auto;        
    background: rgba(0,100,100,0.5);        
    animation: bounce 2s cubic-bezier(.58,.13,.94,.64) forwards;
}

更多點我看效果 github

博客放在 github 上了，歡迎你們 star or fork，我會持續更新 CSS 一些效果。