animation属性

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

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;}
}
上一篇:分析WordPress数据表之分类标签表(功能篇)


下一篇:VS2015安装与C++进行简单单元测试