举个栗子：
--------元素整体居中
.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. Nginx的使用（二）Nginx配置wordpress

    安装php:https://windows.php.net/download/,php默认启动命令:php-cgi.exe -b 127.0.0.1:9000 安装wordpress:https:// ...

  2. SpringBoot使用CORS解决跨域请求问题

    什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...

  3. 使用matlab生成用于ROM初始化的coe文件（转）

    reference:https://www.cnblogs.com/chensimin1990/p/9759368.html t=0:2*pi/2^12:2*pi; y=0.5*sin(t)+0.5; ...

  4. Linux的相关概念

    1 Linux的相关概念 1.1 什么是操作系统? 操作系统(英语:operating system,缩写:OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内核与基石.操作系统需要处 ...

  5. 编译darknet出现libpng16.so.16：对‘inflateValidate@ZLIB_1.2.9’未定义的引用

    cd /usr/lib/x86_64-linux-gnu sudo ln -s ~/anaconda/lib/libpng16.so.16 libpng16.so.16 sudo ldconfig## ...

  6. 1) 嵌套的 div ,或者 ul ol .li 阻止冒泡 ,特别是 对应onclick="test(event)" 通过传递event 阻止 冒泡. cancelBubble , stopPropagation

    1 .html 结构: <ul class="ul_2 hide" data-first="5"> <li class="li_2& ...

  7. GPU知识了解

    前言 今天在使用阿里云的时候,无意间看到了有GPU服务器,于是对它做了一个大概的了解. 概念 GPU是Graphics Processing Unit的缩写,翻译成中文就是图形处理器.是一种专门在个人 ...

  8. 2.常用adb命令的使用

    使用电脑连接手机,查看手机的唯一编号,如果是模拟器,就是显示地址和端口号: adb devices 使用adb安装app应用: adb install apk路径和包名 -r 允许覆盖安装 -s 将a ...

  9. go延时队列

    package main import ( "errors" "flag" "fmt" log "github.com/cihub ...

  10. CentOS6.5上安装MySQL

    1.查看操作系统的相关信息 2.查看系统上所有MySQL的rpm包并删除 [root@master ~]# rpm -qa | grep -i mysql [root@masterc ~]# yum ...