CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

语法：div{animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向}

@keyframes 动画名称{

   from{

         //do something

   }

   to{

      //do something

   }

}
属性 描述 CSS
@keyframes 规定动画，动画播放的执行函数 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3 
利用transform的动画效果：

1.translate(x,y)  2d,两点之间移动。还可以分开写translateX(x)只移动X 轴的值。translateY(y)只移动Y轴。

2.scale(x,y) 缩放效果

3.rotate(angle) 旋转效果，单位是deg(度)

4.skew(x-angle,y-angle) 倾斜转换
水平移动效果：

@keyframes move{
  from{
    transform: translateX(0px);
  }
  to{
    transform: translateX(1000px);
  }
}

水平旋转：
@keyframes move{

     from{
　　　　transform: rotate(180deg);
} 
to{ transform: rotate(180deg); } 
}
垂直旋转：
@keyframes move{

     from{
　　　　transform: rotateY(180deg);
} 
to{ transform: rotateY(180deg); } 
}




例子：




<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片播放Demo</title>

<style>

     .animate{

         width:100px;

         height:100px;

         background:red;

         position:absolute;

         animation: move .6s infinite alternate;

     }

     @keyframes move{

         from{

            transform: rotateY(180deg);

         }

         to{

             transform: rotateY(360deg);

         }

     }

</style>

</head>

<body>

    <div class="animate"></div>

</body>

</html>


												


											
css3动画之animate的更多相关文章
	

    
								
  1. css3动画和animate.css动画库使用
		
    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
    
		
    2. 
						
  2. CSS3动画框架 Animate.css
		
    CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
    
		
    3. 
						
  3. css3动画简介以及动画库animate.css的使用
		
    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
    
		
    4. 
						
  4. animate.css 一些常用的CSS3动画效果
		
    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
    
		
    5. 
						
  5. 转: css3动画简介以及动画库animate.css的使用
		
    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
    
		
    6. 
						
  6. 【转载】css3动画简介以及动画库animate.css的使用
		
    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
    
		
    7. 
						
  7. CSS3动画animation认识，animate.css的使用
		
    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
    
		
    8. 
						
  8. css3动画animate
		
    CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
    
		
    9. 
						
  9. CSS3动画制作
		
    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. poj1080--Human Gene Functions(dp:LCS变形)
			
    Human Gene Functions Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17206   Accepted:  ...
    
			
    2. 
						
  2. C++中如何建立一个顺序表
			
    准备数据 #define MAXLEN 100 //定义顺序表的最大长度 struct DATA { char key[10]; //结点的关键字 char name[20]; int age; }; ...
    
			
    3. 
						
  3. oracle常用查询三
			
    查询跟索引有关的数据字典时,可以用下面这条SQL语句: SQL>select * from dictionary where instr(comments,'index')>0; 如果我们 ...
    
			
    4. 
						
  4. linux查看用户登录信息2-who命令
			
    who命令与w命令相似,但要比w命令显示更加详细的信息.[root@rusky opt]# man who WHO(1) User Commands WHO(1) NAME who - show wh ...
    
			
    5. 
						
  5. nginx日志格式
			
    日志格式 log_format main '$remote_addr - $remote_user [$time_local] $request '                    '" ...
    
			
    6. 
						
  6. [?]Unity快捷键
			
    Super=Win键. Rererence: What are Unity's keyboard and mouse shortcuts?
    
			
    7. 
						
  7. 从汇编看c++中成员函数指针(一)
			
    下面先来看c++的源码: #include <cstdio> using namespace std; class X { public: int get1() { ; } virtual ...
    
			
    8. 
						
  8. oracle数据块的大小
			
    标准数据块用于临时表空间和系统表空间,同时也是一个表空间数据块的默认值.标准数据块的大小是在创建数据库时由参数DB_BLOCK_SIZE确定的.若要改变这一设置必须重建数据库. DB_CACHE_SI ...
    
			
    9. 
						
  9. LogBoy logo
			
    
			
    10. 
						
  10. sqlite在Android上的一个bug：SQLiteCantOpenDatabaseException when nativeExecuteForCursorWindow
			
    更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ ::-/com.company.product W/System.er ...
    
			
    11.