animation属性
文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~
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;} }