css3动画

css3动画

收集了常用Css3动画效果,提供74常见动画效果,这些动画在我们只做ppt经常会用到!选择对应动画,可以得到动画css代码! 这样你不必下载所有动画库,用到那个动画效果,直接复制css代码即可!只有支持Css3上面才支持该动画!

弹跳闪光脉冲橡皮筋抖动摇摆转出摇晃缩放弹入从下弹入从左弹入从右弹入从上弹入缩放弹出从下弹出从左弹出从右弹出从上弹出渐渐进入从上进入从上进入快从左进入从左进入快从右进入从右进入快从下进入从下进入快慢慢消失向下消失向下消失快向左消失向左消失快向右消失向右消失快向上消失向上消失快翻转水平转入垂直转入水平转出垂直转出跑马灯进入跑马灯消失旋转进入从左边向下旋转进入从右边向下旋转进入从左边向上旋转进入从右边向上旋转进入旋转消失从左边向下旋转消失从右边向下旋转消失从左边向上旋转消失从右边向上旋转消失向上滑动进入向下滑动进入向左滑动进入向右滑动进入向上滑动消失向下滑动消失向左滑动消失向右滑动消失缩放进入向下缩放进入从左缩放进入从右缩放进入向上缩放进入缩放消失向下缩放消失从左缩放消失从右缩放消失向上缩放消失合页滚入滚出
  1. .animated {
  2. -webkit-animation-duration: 1s;
  3. animation-duration: 1s;
  4. -webkit-animation-fill-mode: both;
  5. animation-fill-mode: both
  6. }
  7.  
  8. @-webkit-keyframes flash {
  9. 0%,100%,50% {
  10. opacity: 1
  11. }
  12.  
  13. @keyframes flash {
  14. 0%,100%,50% {
  15. opacity: 1
  16. }
  17.  
  18. .flash {
  19. -webkit-animation-name: flash;
  20. animation-name: flash
  21. }
事例代码:<div class="animated flash">测试</div> ;flash 可以用其它动作名称代替