css3動畫特效：上下晃動的div

<div id="square" class="container animated">上下晃動</div> /** * transform-origin 設置旋轉元素的基點位置 * animation-name 設置動畫名稱 * animation-duration 設置動畫時間 * animation-fill-mode 設置播放后的狀態 * animation-iteration-count 設置循環播放的次數 * transition-timing-function: cubic-bezier 貝塞爾曲線效果，它有四個值，指在X軸與Y軸的兩個曲線的點，第一個點：X1 Y1;第二個點：X2 Y2 * transform: translate3d 設置動畫Z軸位移幾個元素，表示只在Z軸上移動 * * 需要注意：transform: translate3d 不等於 transform: translateZ */ .animated { animation-duration: 1s; /*動畫時間*/ animation-fill-mode: both; /*播放后的狀態*/
} .animated { animation-iteration-count: infinite; /*動作循環的次數：infinite 無限循環*/
} .animated { animation-duration: 2s; /*動畫時間*/
} .container { background: #2D97DB; width: 90%; height: 90%; padding: 100px; margin: 20px auto; font-family: "微軟雅黑"; font-size: 40px; color: white; text-align: center; line-height: 90%;
} .container:hover{ animation-name:container; /*動畫的名稱*/ transform-origin: center bottom; /*設置動畫旋轉元素的基點為：居中靠下*/ cursor: pointer;
} @keyframes container{ 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*貝塞爾曲線 ： X1 Y1 X2 Y2*/ transform: translate3d(0,0,0); /*設置只在Z軸上移動*/
  } 40%, 43%{ transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-30px,0);
  } 70%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-15px,0);
  } 90%{ transform: translate3d(0,-4px,0);
  } }