一、前言

  在CSS中,我们经常会使用到transform、transition、translate、animation(@keyframes)这些长得相似,又不好区分的属性(值)。每当需要使用它们,都需要去查找相关的介绍和使用方法,完成后却又继续困惑中。而本篇博客将将它们汇合起来,一起介绍给你。

  简单介绍:

  • transform属性:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
    例如:transform:rotate(7deg); transform:translate(x,y);。
  • translate属性值:是transform的值,定义 2D 转换,表示对当前元素的位移
    和rotate(angle)旋转,scale(x,y)缩放等并列 ,同为transform的值。
  • transition属性:允许CSS属性值在一定的时间区间内平滑的过渡,需要事件的触发,例如单击、获取焦点、失去焦点等
    例如:transition(border-radius  2s); 表示在两秒时间内过渡border-radius属性的变化状态
  • animation属性:通过帧动画对当前元素的某些属性进行帧动画的播放,功能相似于transition,但更加的精确、可控
    例如:animation:mymove 5s infinite;(mymove是帧动画的名称)
  • translation:意思是翻译,在CSS中没有任何应用,不过它容易和上面的混淆。。。

二、正文

1.transform介绍

  • 旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)
  • 扭曲:skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:skew(50deg,20deg)
  • 缩放:scale() 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)
  • 移动:translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer 9*/
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}

上面的代码表示:对元素旋转了9度,还可以进行其他的转换scale的缩放和translate的位移。

2.translate介绍:

translate(x, y)只是transform的一部分,主管位移功能。

还有:translate3d(x, y, z)和translateX(x)、translateY(y)、translateZ(z)。

3.transition介绍

transition属性是个复合属性,她包括以下几个子属性:

  • transition-property :规定设置过渡效果的css属性名称
  • transition-duration :规定完成过渡效果需要多少秒或毫秒
  • transition-timing-function :指定过渡函数,规定速度效果的速度曲线
  • transition-delay :指定开始出现的延迟时间

默认值分别为:all 0 ease 0

div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
} div:hover{
width:300px; /* 也可以对颜色进行过渡,比如background: red;*/
}

上面的代码表示:在2s内对元素进行宽度从100px到300px的变化过渡;

注意:CSS属性值在一定的时间区间内平滑的过渡,需要事件的触发,例如单击、获取焦点、失去焦点等

https://www.cnblogs.com/afighter/p/5731293.html

4. animation和@keyframes关键帧的介绍

animation属性是个复合属性,她包括以下几个子属性:

  • animation-name 规定需要绑定到选择器的 keyframe 名称。。
  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:move 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
} @keyframes move{
from {top:0px;}
to {top:200px;}
}

上面的代码表示:在5s内对元素的相对位置的top属性进行从0px到200px的移动。

transition和animation的区别:

  • animation可以控制到每一帧,
    高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前状态等;
  • translation只是一个过渡 只能设置 初始值和结束值。

三、结语

先到这儿喽!

css3中的transform、transition、translate、animation(@keyframes)的区别的更多相关文章

  1. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. CSS3中transform,transition和animation的简单介绍和使用方法演示样例

    transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性. transition是一个属性.它是用来控制过渡效果的,由于用transfor ...

  4. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  5. 对CSS3中的transform:Matrix()矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  6. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  7. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  8. CSS3中的transform

    CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate sca ...

  9. CSS3中的transform转换属性

    属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...

随机推荐

  1. lapis 基本开发

    1. 生成项目代码 // 支持lua 以及 moonscript, 默认是moonscript 通过--lua 可以生成lua 的代码 lapis new --lua ├── app.lua ├── ...

  2. 基于jquery 的ajax 文件下载

    ajax 文件下载,实际上就是模拟表单提交,代码如下: function download(url, data, method){ //url and data options required if ...

  3. #define用法

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME) { // } 编译器在处理 ...

  4. Linux之 xstart调用 x11vnc远程图形化桌面

    问题:用 xmanager 中的 xstart 启动界面,报x11无法打开 . 1. root调整x11参数,将其打开[root@localhost ~]# vi /etc/ssh/sshd_conf ...

  5. 浅谈splay

    \(BST\) 二叉查找树,首先它是一颗二叉树,其次它里面每个点都满足以该点左儿子为根的子树里结点的值都小于自己的值,以该点右儿子为根的子树里结点的值都大于自己的值.如果不进行修改,每次查询都是\(O ...

  6. angular-ui-bootstrap的弹出框定义成一个服务的实践(二)

    定义一个弹出框的服务:alert_box defiine(["app"],function(mainapp){ mainapp.controller('ModalInstanceC ...

  7. 常见企业IT支撑【1、办公网络IP地址规划】

    规划思路如下,可灵活变化

  8. laravel 中事务的使用

    在laravel5.3中使用事务 可以直接使用\DB::beginTransaction();使用 前提是数据库表必须支持事务,目前mysql中表类型只有InnoDb支持事务 想要在一个数据库事务中运 ...

  9. php分页类 可直接调用

    <?php /** * 分页类 * @author xyy * 调用分页实例 $subPages=new SubPages(数据总条数);//实例化分页类 * //$subPages->s ...

  10. OpenCV在debug和release模式下选择不同的lib静态库文件

    这两天测试OpenCV显示到MFC的Picture控件上,终于测试成功了,但是换到release模式下就会imread失败.发现问题是导入的lib问题. 因为VS如果通过Property Manage ...