一聚教程网:一个值得你收藏的教程网站

热门教程

CSS3动态效果学习笔记

时间:2022-06-25 13:43:39 编辑:袖梨 来源:一聚教程网

@keyframe  规定动画
一般是跟animation一起用

animation : 规定动画的名字 规定动画的时间 规定动画的速度曲线。
@keyframe 定义动画的名称{ 动画时长的百分比。{一个或多个合法的 CSS 样式属性}  }

目前大部分浏览器都没有支持@keyframe 和animation;所以要分浏览器书写
@keyframe
1.safari和chrome浏览器
@-webkit-keyframes myfrom{
  from {top:0;}
  to {top:200px;}
}

2.Firefox浏览器
@-moz-keyframes myfrom{
  from {top:0;}
  to {top:200px;}
}
 
3.Opera浏览器
@-o-keyframes myfrom{
  from {top:0;}
  to {top:200px;}
}

animation
1.safari和chrome浏览器
@-webkit-animation : myfrom 5s infinite
2.Firefox浏览器
@-moz-animation : myfrom 5s infinite
2.Opera浏览器
@-o-animation : myfrom 5s infinite

例子

 代码如下 复制代码



 
  CSS3动态效果demo
  
  word" content="CSS3动态效果demo">
  
  
  
 
 
  


   

    

     animation
     动画属性
     @keyframes:
     规定动画
    

    源代码
   

   

    

     animation-delay:
     规定动画何时开始
    

    源代码
   

   

    

     animation-iteration-count:
     规定动画次数
    

    源代码
   

   

    

     animation-direction:
     规定下次动画逆向
    

    源代码
   

   

    

    

    源代码
   

   

    

     
    

    源代码
   

   

    

     
    

    源代码
   

   

    

     
    

    源代码
   

  

  
  

   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1  conns">animation-delay:规定动画何时开始 </div>
   
  

  

   
   
  

  

   
   
  

  

   
   
  

  

   
   
  

  

   
   
  

  

   
   
  

  

   
   
  

  
  
 

热门栏目