animation属性

Posted 2021-02-09 yaoyao-sun

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

CSS3（三）Animation 入门详解

css3中变形与动画（三）

 

CSS3 Animation 是由三部分组成。

• 关键帧(keyframes) - 定义动画在不同阶段的状态。
• 动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）详细属性值查询CSS3 animation 属性
• 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;}
}