举个栗子：
--------元素整体居中
.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. Spring Boot + Spring Cloud 实现权限管理系统 权限控制（Shiro 注解）

    技术背景 当前,我们基于导航菜单的显示和操作按钮的禁用状态,实现了页面可见性和操作可用性的权限验证,或者叫访问控制.但这仅限于页面的显示和操作,我们的后台接口还是没有进行权限的验证,只要知道了后台的接 ...

  2. java通过StringToKenizer获取字符串中的单词根据空格分离-详情版

    public class DaXie { public static void main(String[] args) { String strin = "Hello Java World! ...

  3. 新一代的json--fetch

    fetch( "http://jsontest.bceapp.com/hi", { method:"POST", mode:"core", ...

  4. Mac上svn报错解决方案

    具体的报错信息为:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing ...

  5. Mac High Sierra 降级安装Mac Sierra

    1>.将你装备好的U盘用Mac自带的磁盘管理工具格式化成Mac OS扩展(日志式),名称输入disk:2>.打开终端工具,按以下步骤操作:(均不含引号,如未设置系统密码,请前往设置> ...

  6. leetcode python 011

    ####给定n个非负整数a1,a2,...,an,其中每个表示坐标(i,ai)处的点.##绘制n条垂直线,使得线i的两个端点位于(i,ai)和(i,0).##找到两条线,它们与x轴一起形成一个容器,这 ...

  7. jsoncpp

    1.y.z is built with C++11. 0.y.z can be used with older compilers 1.y.z 版本是基于C++11的:0.y.z 是基于老版本的,为了 ...

  8. 神州数码广域网Frame-Relay封装配置（即帧中继）

    实验要求:了解帧中继的配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 ip address ...

  9. 实验楼高级bash脚本编程指南 挑战：简单的热身

    传送门:https://www.shiyanlou.com/courses/running# 步骤一 新建一个 test.sh 输出 Hello Shiyanlou! 步骤二 复制 test.sh 为 ...

  10. linux c 输出信息到console

    static void console_log(const char *format, ...) { static FILE *fpConsole; if (fpConsole == NULL) { ...