举个栗子：
--------元素整体居中
.box{
     position:absolute;top:50%;left:50%;
    width:50px;
    height:50px;
    transform:translate(-50%,-50%);
    background:gray;
}
1.translate:移动，是transform的一个方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);

2.transform:变形,改变
CSS3中主要包括：
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;
transform: rotate 旋转| scale 缩放| skew扭曲 | translate移动 |matrix矩阵变形;
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开

3.transition: 允许CSS属性值在一定的时间区间内平滑的过渡。(过渡动画)

Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡。
如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
transition主要包含四个属性值：
（1）执行变换的属性：transition-property；
（2）变换延续的时间：transition-duration；
（3）在延续时间段，变换的速率变化：transition-timing-function  //例:平缓进入、先快后慢；
（4）变换延迟时间：transition-delay。
需要事件的触发，例如单击、获取焦点、失去焦点等。
语法：transition:property duration timing-function delay;
例如：transition:width 2s ease 0s;

4.Animation
Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，
与Transition不同的是：
1.Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行
（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活；
2.Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元
素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。
Animation模块包括了animation-name、animation-duration、animation-timing-function、
animation-delay、animation-iteration-count、animation-play-state等属性。

animation详解：

什么是css3中的动画：
使元素从一种样式逐渐变化为另一种样式
可以改变任意多的样式任意多的次数
可以用百分比规定变化发生的时间，或者用关键词“from”和“to”,等价于“0%”和“100%”，表示动画的开始和完成

通过css3我们可以创建动画，可以代替页面中的动画图片、Flash动画以及JavaScript。

如果创建css动画，需要了解@keyframes规则。
@keyframes规则用于创建动画，在其中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实现：
在 @keyframes 中创建动画时，要将其捆绑到某个选择器，否则不会产生动画效果。
需要至少规定以下两项：
规定动画的名称
规定动画的时长

示例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
/*兼容处理*/
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

/*定义动画----myfirst是动画的名称*/
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

css变换与动画详解的更多相关文章

  1. css 12-CSS3属性详解：动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  2. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  3. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

  4. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  5. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  6. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  7. [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  8. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  9. Android中的动画详解系列【4】——Activity之间切换动画

    前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...

随机推荐

  1. 64位win7连接ACCESS报错“Microsoft.Jet.OLEDB.4.0”问题

    本人开发了桌面软件,关于事务提醒,自己一直在用,很喜欢,但是在64位win7上无法运行,网上说多种方法,都觉得麻烦.后来自己在vs2012下编译成x86版本,结果可以运行在64位win7下了. 原来如 ...

  2. 说一说本人对linux系统学习的方法和经验

    摘要: 相信大伙都听说过linux系统,然而对于这个系统,总使让新手感觉茫然,诺达的系统.下面是一段百度中的介绍: 相信大伙都听说过linux系统,然而对于这个系统,总使让新手感觉茫然,诺达的系统.下 ...

  3. AWK入门

    AWK类型    AWK:源于AT&T实验室的AWK    NAWK:AWK的升级版    GAWK:GNU AWK,兼容AWK和NAWK    程序结构    BEGIN语句块,可选     ...

  4. A JSON example

    heroes.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. python变量进阶(可变不可变，局部变量和全局变量)

    变量进阶(理解) 目标 变量的引用 可变和不可变类型 局部变量和全局变量 01. 变量的引用 变量 和 数据 都是保存在 内存 中的 在 Python 中 函数 的 参数传递 以及 返回值 都是靠 引 ...

  6. STL next_permutation 算法原理和实现

    转载自:https://www.cnblogs.com/luruiyuan/p/5914909.html 目标 STL中的next_permutation 函数和 prev_permutation 两 ...

  7. TestLink测试管理工具的使用举例—第一篇

    本博客用来详细说明TestLink测试管理工具的使用方法,前两篇博客已经详细说明了TestLink工具的下载,安装及基本登录功能,本篇开始说明其工具的具体使用! 下载安装TestLink工具之后,我们 ...

  8. Java学习笔记36（jdbc快速入门）

    JDBC: Java DataBase Connectivity 是java程序连接存取数据库的应用程序接口 (是sun公司的程序员定义的一套操作数据库的规则,然后下面的各个公司如:mysql,sql ...

  9. SQL注入之Sqli-labs系列第三十六关（基于宽字符逃逸GET注入）和三十七关（基于宽字节逃逸的POST注入）

    0X1 查看源码 function check_quotes($string) { $string= mysql_real_escape_string($string); return $string ...

  10. s21day07 python笔记

    s21day07 python笔记 一.昨日内容回顾及补充 回顾 补充 将前面所提到的功能,统一改称为方法 二.深浅拷贝 基本格式 v1 = [1,2,3] import copy v2 = copy ...