CSS3 animation and keyframes关键帧

关键帧--keyframes

• 类似于flash

• 只需指名两个状态,之间的过程由计算机自动计算

• 关键帧的时间单位

  • 数字: 0% 25% 100%等(不写0%或100%的状态,就默认为已经设置的样式)
  • 字符: from(0%) , to(100%)

• 格式(1)

  • @keyframes 动画名称{动画状态}

• 格式 (2)

• @keyframes move{from{background:red;} to {background:green};}

• 可以只有to

animation基本使用

animation属性

-webkit-animation: 动画时间 延迟时间 动画名称 运动状态 次数 播放前重置

-webkit-animation:2s 1s move linear infinite alternate

动画播放暂停

• animation-play-state: 播放状态(running播放和paused暂停)

播放前重置用的很少

• alternate:动画直接从上一次挺值得位置开始执行
• normal :动画第二次直接跳到0%的状态开始执行

animation-Js结合

• 通过class
  • 在class里面加入animation的各种属性
  • 直接给元素加入 -webkit-animation-xxx样式
• animation的问题
  • 写起来麻烦
  • 没办法改变目标点的位置

obj.addEventListener("webkitAnimationEnd",function(){})

走回字和鼠标暂停

效果图如下:

小球运动.gif

---

正序倒序播放

效果如下

小球运动正序或者倒叙.gif

代码如下:

处理完毕后回到默认的样式

    
    
    



通过类名加动画效果

    

animationed事件

效果如下

animationEnd.gif

    
    
    


点击后配合animationEnd事件点击后就会变化

简易版本的无缝滚动

效果图

无缝滚动.gif

代码如下

    
    
    





    
1
    
2
    
3
    
4
    
5
    
1
    
2
    
3
    
4
    
5

以上CSS3 animation 知识点全部完毕