文章中转站，因为涉及到动画效果，还是看文笔比较好的博主吧~

 

CSS3 Animation 是由三部分组成。

• 关键帧(keyframes) - 定义动画在不同阶段的状态。
• 动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）详细属性值查询
• css属性 - 就是css元素不同关键帧下的状态。

 

代码示例：

创建了一个@keyframes命名为dropdown。

• 关键帧主要分为3个阶段，0%、50%、100%。
• 动画播放时长为8s、循环播放(infinite)、以linear方式进行播放。
• 修改的元素属性为margin-top

.list div:first-child {
    animation: dropdown 8s linear infinite;}@keyframes dropdown {
       0% { margin-top: 0px;}   /** 暂停效果 */   10% {
    margin-top: 0px;}   50% {
    margin-top: -100px;}   60% {
    margin-top: -100px;}   90% {
    margin-top: -200px;}  100% {
    margin-top: -200px;}}