举个栗子：
--------元素整体居中
.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. Python—迭代器与生成器

    迭代器与生成器 生成器(generator) 先来了解一下列表生成器: list = [i*2 for i in range(10)] print(list)>>>>[0, 2 ...

  2. 基于vue的实战步骤

    1.脚手架vue-cli安装 npm install -g vue-cli (npm init -f 生成package.json文件) vue init webpack myapp cd myapp ...

  3. 项目中Java Resources有红叉,其它没有，解决办法

    说起这个这个地方,我课改了好久 起初,我把原先项目的JDK版本改了,右击项目Build Path,然后换掉里面的JRE,没用, 然后右击项目,点击properties,找到在Project Facet ...

  4. CodeForces - 589B（暴力+排序）

    Dasha decided to bake a big and tasty layer cake. In order to do that she went shopping and bought n ...

  5. Python函数定义、文件操作（读写、修改）

    date:2018421 day3 一.函数定义 def  函数名(首字母大写) 增加程序可读性 #直接写函数名即可调用函数 #参数 ①.形参 ②.实参 ③.缺省参数 如果有默认值,调用的时候没有传递 ...

  6. web(五)CSS引入方式，编写规范及调试

    CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准 CSS的主要作用: 美化html元素的外观,例如设定背景颜色.字体等. 对网页元素进行布局.以 ...

  7. 处理csv和json数据

    CSV是以逗号为分隔符,存储数据的文件. 流程:1.filename存储文件名.2.打开文件并存储在文件对象f中.3.将f传递给csv.reader()创建阅读器对象.4.next()获取第一行. e ...

  8. Shell脚本、Shell脚本结构、date命令的用法、变量

    1.Shell脚本: shell是一种脚本语言 目的:可以实现自动化运维,能大大增加运维的效率.2.Shell脚本结构:   #!/bin/bash  以#!/bin/bash开头,即以/bin/ba ...

  9. SQL 优化经历

    一次非常有趣的 SQL 优化经历   阅读本文大概需要 6 分钟. 前言 在网上刷到一篇数据库优化的文章,自己也来研究一波. 场景 数据库版本:5.7.25 ,运行在虚拟机中. 课程表 #课程表 cr ...

  10. java-Calendar类

    1.Calendar类的概述和获取日期的方法 * A:Calendar类的概述 * Calendar 类是一个抽象类,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR ...