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 一些效果。