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. [英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏]
			
    [英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏] 原片名:The World at War  中文名:战争中的世界  导 演:Ted Childs, ...
    
			
    2. 
						
  2. [有向图的强连通分量][Tarjan算法]
			
    https://www.byvoid.com/blog/scc-tarjan 主要思想 Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的 ...
    
			
    3. 
						
  3. apache如何在虚拟主机中实现用户验证
			
    1,在相应的虚拟主机配置文件段,加入<Directory  /data/www.admin.php>                AllowOverride AuthConfig     ...
    
			
    4. 
						
  4. 使用SOAPUI测试WEBAPI接口
			
    其实很简单,用起来也挺方便的. 首先,先去百度下SoapUI 下载,下载安装好后,打开软件. 1.新建一个项目 点击 Create Empty Project 按钮后,会自动新建一个项目,名字默认为: ...
    
			
    5. 
						
  5. 批处理Bat实现整合定时关机或取消定时关机
			
    @echo off :start choice /c:12 /m "输入1为设置定时关机,2为取消定时关机: " if errorlevel 2 goto cancel if er ...
    
			
    6. 
						
  6. tomcat应用服务器
			
    Tomcat性能调优方案 一.操作系统调优 对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU的频率,保证文件系统的读写速率等.经过压力测试验证,在并发连接很多的情况下,CPU的处理能力 ...
    
			
    7. 
						
  7. Asp.Net使用Bulk批量插入数据
			
    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Di ...
    
			
    8. 
						
  8. VC++深入详解读书笔记-第七章对话框
			
    1.在MFC中,所有的控件类都是由CWnd类派生来的,因此,控件实际上也是窗口. 2. 3.对话框的种类 模态对话框 模态对话框是指当其显示时,程序会暂时执行,直到关闭这个模态对话框后,才能继续执行程 ...
    
			
    9. 
						
  9. inline 间距
			
    今天看了内联元素的间距: http://blog.csdn.net/hedong37518585/article/details/6657853
    
			
    10. 
						
  10. %hd %d %ld %u ......
			
    %d 有符号10进制整数 %ld 长整型 %hd短整型%md,m指定的是输出字段的宽度,默认左补空格, 如果数据的位数小于m,则左端补以空格,若大于m,则 按实际位数输出,如: printf(&quo ...
    
			
    11.