定义式
 @keyframes   动画名称{
      from{  }
      to{    }
 }

 调用式
 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用。
 animation: 动画名称  动画时间  延时  时间曲线  播放次数  交替播放 ;

 animation: donghua 1s 1s infinite alternate linear;
 animation-name: donghua;       /*动画名称*/
 animation-duration: 1s;         /*动画时间*/
 animation-timing-function: linear;  /*时间曲线*/
 animation-delay: 1s;             /*动画延时*/
 animation-iteration-count: infinite;/*播放次数*/
 animation-direction: alternate;     /*交替播放*/

 显示最终状态

 animation-fill-mode: forwards ;
 PS:动画播放完毕,默认是回到最初的状态。(如果需要改变,设置  forwards )
 动画暂停
 animation-play-state: paused;
 注意:动画暂停,不要写到animation复合属性里,因为复合写法有一定的兼容问题。

 多个中间状态的动画
 @keyframes   run{
     0%{    } 等价于from
     50%{   } 中间可以写入多个百分比状态 (帧动画)
     100%{  } 等价于to
 }

 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

 过渡
 transition:过渡属性    过渡时间    时间曲线    过渡延时。
 注意:它是一个复合属性。可通过Chrome查看。
 all 关键词 代表全部,较为常用。

 transition 简写属性,用于在一个属性中设置四个过渡属性。  用回调函数,每一次动画过渡完都让他停止 transform:none;
 transition-property 规定应用过渡的 CSS 属性的名称。
 transition-duration 定义过渡效果花费的时间。默认是 0。
 transition-timing-function 规定过渡效果的时间曲线。通过linear在F12下改变贝塞尔曲线
 transition-delay 规定过渡效果何时开始。默认是 0。  要单独写不能组合写,还有要在transition后面跟着,不要在前面单独写,(在前面有transition的前提下,因为这样会被覆盖不会执行他)

 2维(2D)转换(转换后结合过渡更为自然)

 核心属性:transform;

 核心值

 位移:  translate(x,y)
 旋转:  rotate(角度)  角度的单位是deg,默认是顺时针方向。
 缩放:     scale(缩放比例) 一般填入一个值即可,写2个值分别代表水平方向和垂直方向
 斜切:    skew(角度)

 旋转中心点

 transform-origin: x   y ;

 取值:

 固定值    如:100px  100px
 百分比    如:100%  100%
 方向值  top   bottom  left    right  center

 3维(3D)转换

 核心属性还是  transform,3维只是比2维多了1维。

 3维转换还是旋转,缩放,位移,只不过在后面多加了一个坐标系控制对应轴向(Z轴)。
 如 :rotateX()   rotateY()   translateZ()
 它还有另一种写法:
 translate3d(x,y,z)
 scale3d(x,y,z)
 rotate3d(x,y,z,角度)
 注意:3维里没有斜切。
 经验:如果转换模块写成3维的形式,在手机端它开启硬件(GPU)加速,动画的性能有所提升。

 背部不可见

 backface-visibility:hidden;(结合百度钱包)刚开始就把他的

 透视
 perspective: 像素 ;
 透视属性是模拟人眼看物体近大远小的特征。
 添加透视属性的时候,注意不要添加给物体本身,一般我们会添加给父级。

CSS3 动画的一些属性的更多相关文章

  1. css3 动画的有关属性

    transform transform: none|transform-functions; transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. ...

  2. css3动画(transition)属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  3. CSS3动画那么强,requestAnimationFrame还有毛线用?

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

  4. [转]WebKit CSS3 动画基础

    前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...

  5. CSS3动画那么强,requestAnimationFrame还有毛线用--摘抄

    CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...

  6. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  7. 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  8. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  9. 解决浏览器background-image属性不支持css3动画

    问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...

随机推荐

  1. android发短信,打电话

    //1.进入系统短信列表界面 Intent intent = newIntent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_DEF ...

  2. UILabel富文本 段落格式以及UILabel添加图片

    之前文本整理有一点乱,这边重新整理一下,下面是效果图,一共两个UILabel, 富文本整理: /*NSForegroundColorAttributeName设置字体颜色,对象UIColor; NSP ...

  3. KMP(http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2772)

    #include <stdio.h>#include <string.h>#include <stdlib.h>char a[1000001],b[1000001] ...

  4. oracle 之创建用户,表空间,授权,修改用户密码

    1.创建表空间 create tablespace ilinkcargoagent logging datafile 'D:\app\Administrator\oradata\ilinkcargoa ...

  5. 复习一下property

    在面向对象程序里,一个对象不要直接访问另一个对象内部的数据.所以我们使用accessor methods来进行对象内部的数据交互. accessor methods(getters and sette ...

  6. Android adb.exe程序启动不起来处理方法

    经常遇到 Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be ...

  7. SQL中SELECT INTO和INSERT INTO SELECT语句介绍

    表复制是经常要用到的操作,下面就将为您介绍SQL中SELECT INTO和INSERT INTO SELECT语句,供您参考. Insert是T-sql中常用语句,Insert INTO table( ...

  8. mysql进程文件

  9. 《Enhanced LSTM for Natural Language Inference》(自然语言推理)

    解决的问题 自然语言推理,判断a是否可以推理出b.简单讲就是判断2个句子ab是否有相同的含义. 方法 我们的自然语言推理网络由以下部分组成:输入编码(Input Encoding ),局部推理模型(L ...

  10. linux常用命令:用SecureCRT来上传和下载文件

    用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem. ...