Transform:变形

  在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转、缩放、平移、扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能。

  CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转、缩放、平移、扭曲等效果。目前webkit内核支持-webkit-transform私有属性,Mozilla Geckos内核支持-moz-transform私有属性,IE浏览器支持-ms-transform私有属性。

  在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。

  关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。

  关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。

  如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

  总体看来 css transform的属性和原来使用的left ,right ,top, bottom 的属性从动静角度来说没有任何区别,因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

用法分析:

  Transform字面上就是变形、改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和平移translate。

  语法:

    transform : none | transform-function [ transform-function ]*

    也就是:transform: rotate | scale | skew | translate;

  none:表示不进么变换;transform-function表示一个或多个变换函数,以空格分开;换句话说就是我们可以同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种。但这里需要提醒大家,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时只需要用空格隔开。

  主要是以下几个点:1、旋转rotate;2、平移translate;3) 缩放scale;4) 扭曲skew;5)transform-origin(x, y)

  这里就只说skew和transform-origin:

  skew(angle [, angle]) :设置X轴与Y轴上的斜切变换。skew是用来对元素进行扭曲变形,第一个参数是水平方向扭曲角度(即垂直的高度不变,水平方向变),第二个参数是垂直方向扭曲角度,其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。具体展示请查看

  还有改变元素基点的transform-origin:它的主要作用就是在进行transform动作之前可以改变元素的基点位置,因为元素默认基点就是其中心位置,换句话说没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate、translate、scale、skew等操作都是以元素自己的中心位置进行变化的。

  但有时候我们需要在不同的位置对元素进行这些操作,那么就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在中心位置,以达到需要的基点位置,下面我们主要来看看其使用规则。

  transform-origin(x, y):用来设置元素的运动的基点(参照点),默认点是元素的中心点。其中x和y的值可以是百分值、em、px,其中x也可以是字符参数值left、center、right;y和x一样除了百分值外还可以设置字符参数值top、center、bottom,这样的设置有点像background-position的写法一样。

Transition:过度

  在页面开发中经常会借助JS来书写大量的特效,以获得较好的页面感官效果。但是真正到了使用JS来操作的时候,往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响,我们今天就来尝试下不借助任何JS,转而使用CSS3过渡来书写出更好的动画效果。

  W3C标准中对CSS3的transition是这样描述的:“CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

  在实际的开发中,经常会遇到手机上的JS动画卡顿现象,所以需要借用其他办法来替代使用,而CSS3的过渡就可以很好的解决这个问题

  transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。比如你有如下两个样式:

<style>
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;
}
</style>

  同时,如果在transition的动画当中,属性值有了新的变化,则会中断当前的动画执行,并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

Transition的语法

  下面同样从其语法和属性值开始一步一步来学习transition的具体使用。

  transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;

  transition主要包含四个属性值:

    1、执行变换的属性:transition-property;

    2、变换延续的时间:transition-duration;

    3、在延续时间段,变换的速率变化:transition-timing-function;

    4、变换的延迟时间:transition-delay。

  有时不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。

  但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的值为transition-duration,第二个为transition-delay。

Animation:动画

  单从Animation字面上的意思,就知道是“动画”的意思。但CSS3中的Animation只应用在页面上已存在的DOM元素上,而且跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样,因为使用CSS3的Animation制作动画可以省去复杂的js、jQuery代码。

  当然CSS3也有一点不足,我们运用Animation能创建自己想要的一些动画效果,但是有时会有卡顿现象。所以如果想要制作比较好的动画,建议大家还是使用CSS3与js相结合的书写方式。

  做过Flash动画的人都会知道,Flash里面有两个基础武器:时间轴和关键帧。前面在使用transition制作一个简单的transition效果时,包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率。其实这些值都只是一个中间值,如果我们要控制的更细一些,比如说要第一个时间段执行什么动作,第二个时间段执行什么动作。这样再用Transition就很难实现了,所以此时也需要这样的一个“关键帧”来控制。

  在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西:keyframes。

  Keyframes具有其自己的语法规则,它的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。

  对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,可以在这个规则中创建多个百分比,分别在每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动、改变元素颜色、位置、大小、形状等。

  不过有一点需要注意的是,可以使用“from”和“to”来代表一个动画是从哪开始,到哪结束。也就是说这个 "from"就相当于"0%",而"to"相当于"100%"。值得一说的是,关键帧中的数值段必须是百分数,如果不是百分数,这个keyframes是无效的,不会起任何作用。因为keyframes的单位只接受百分比值。

  看一个简单的 keyframes 的示例:

<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
} @keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

  上面这个代码展示了一个keyframes 'wobble',其中 0% 代表在变化中不同时间点的属性值,你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是,keyframes提供更多的控制,尤其是时间轴的控制,这点让css animation更加强大,使得flash的部分动画效果可以由css直接控制完成,而这一切,仅仅只需要几行代码,也因此诞生了大量(比起flash来说算是大量了)基于css的animation tools,用来取代flash的动画部分。

  另外在animation属性里面还有一个最重要的就是:animation-fill-mode,这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式,保证动画的整体连贯。

  CSS3的Animation类似于Transition属性,都是随着时间改变元素的属性值。主要区别是Transition需要触发一个事件(hover事件或click事件等)才会随时间改变其CSS属性;而Animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值,从而达到一种动画的效果。

  Animation和Transition一样有自己相对应的属性,那么在Animation主要有以下几种属性:动画名称(animation-name)、动画持续时间(animation-duration)、动画的速度曲线(animation-timing-function)、动画延迟时间(animation-delay)、动画播放次数(animation-iteration-count)、动画播放方向(animation-direction)。

参考:

http://www.jb51.net/css/496935.html

https://mp.weixin.qq.com/s/aPWZPhIb1a928okjcLNPhA

https://mp.weixin.qq.com/s/IPS6oZRM_Ie6ZQU21-V9QA

https://mp.weixin.qq.com/s/fmo5ogDucgyYw_cl5Fck0Q

CSS3中动画属性transform、transition和animation的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  3. css3中的translate,transform,transition的区别

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

  4. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. css010 css的transform transition和animation

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

  7. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

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

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

  9. css3的新特性transform,transition,animation

    一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...

随机推荐

  1. ORA-28000: the account is locked 账户被锁

    这种情况可能是因为你输入错误的用户名密码达到10次,oracle给你锁住了. 解决方法: 首先 ~bash$ sqlplus /nolog SQL> conn sys/sys as sysdba ...

  2. 如何解压.bz2文件包

    .bz2  解压1:bzip2 -d FileName.bz2  解压2:bunzip2 FileName.bz2  压缩: bzip2 -z FileName  .tar.bz2  解压:tar j ...

  3. Nutch搜索引擎(第2期)_ Solr简介及安装

    1.Solr简介 Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化 ...

  4. zabbix 参数说明

    <pre name="code" class="html">数据采集的工作模式可以分为被动模式(服务器端到客户端采集数据) 主动模式(客户端主动上报 ...

  5. gcc 的include path和lib path调整

    `gcc -print-prog-name=cc1plus` -v `g++ -print-prog-name=cc1plus` -v   ------------------------------ ...

  6. 「C」 函数、运算、流程控制

    一.函数 (一)什么是函数 任何一个C语言程序都是由一个或者多个程序段(小程序)构成的,每个程序段都有自己的功能,我们一般称这些程序段为“函数”. (二)函数的定义 目的:将一个常用的功能封装起来,方 ...

  7. Display Database Image using MS SQL Server 2008 Reporting Services

    原文 Display Database Image using MS SQL Server 2008 Reporting Services With the new release of MS SQL ...

  8. cocos2dx lua中异步加载网络图片,可用于显示微信头像

    最近在做一个棋牌项目,脚本语言用的lua,登录需要使用微信登录,用户头像用微信账户的头像,微信接口返回的头像是一个url,那么遇到的一个问题就是如何在lua中异步加载这个头像,先在引擎源码里找了下可能 ...

  9. .Net与 WebAssembly 随笔

    WebAssembly 是啥 - WebAssembly 是一种浏览器支持的字节码格式,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升,需要放到 ...

  10. ZT 线程的分离状态 2012-08-16 17:00:59

    线程的分离状态 2012-08-16 17:00:59 分类: LINUX 其实在写上一篇日志的时候,由于我把创建线程的返回值的判断条件写错了,程序每次运行的时候都是显示创建线程失败,我就百度了一下, ...