CSS3 Transform、Transition和Animation属性总结

CSS3的三个与变形和动画啊相关的属性:

Transform

浏览器支持情况:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

2D transform变换方法

函数描述
translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素
rotate(angle)定义 2D 旋转,在参数中规定角度
scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度
skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵
  • translate(x, y)方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。x, y的值可以取正负,分别表示表示向不同的方向偏移。
  • rotate(angle)方法, 表示旋转angle角度。angle为正时,按顺时针角度旋转,为负值时,元素逆时针旋转。
  • scale(x, y)方法,表示元素在x轴和y轴上的缩放比例,参数大于1时,元素放大,小于1时,元素缩小。
  • skew(x-angle,y-angle)方法,用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg
  • matrix(n,n,n,n,n,n)方法, 以一个含六值的变换矩阵的形式指定一个2D变换,此属性值使用涉及到数学中的矩阵

transform-origin 属性

前面我们提到的transform的方法都是基于元素的中心来变换的,也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数:

transform-origin: x-axis y-axis z-axis;

  • x-axis,表示水平方向上的取值,可以取 字符参数值left,center right,也可以取百分比,字符参数值对应的百分值为left=0%;center=50%;right=100%。
  • y-axis,表示竖直方向上的取值,还可以设置字符值top,center,bottom,也可以取百分比,字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
  • z-axis,表示视图被置于 Z 轴的何处,用于3D变形中。

3D transform变换方法

Internet Explorer 10 和 Firefox 支持 3D 转换.
Chrome 和 Safari 必须添加前缀 -webkit-.
Opera 还不支持 3D 转换(支持 2D 转换 ).

三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数:

  • 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;
  • 3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
  • 3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;
  • 3D矩阵:CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

还有以下几个转换属性:

    • transform-style: 规定被嵌套元素如何在 3D 空间中显示。
    • perspective: 规定 3D 元素的透视效果。
    • perspective-origin: 规定 3D 元素的底部位置。
    • backface-visibility: 定义元素在不面对屏幕时是否可见。

 

目前各大主流浏览器对transform 3d属性的兼容性还不是特别好,感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法:

rotateX()方法,围绕其在一个给定度数X轴旋转的元素;
rotateY()方法,围绕其在一个给定度数Y轴旋转的元素;
rotateZ()方法,围绕其在一个给定度数Z轴旋转的元素。

 

Transition

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

transition属性的值包括以下四个:

    • transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。
    • transition-duration:指定属性过渡的持续时间
    • transition-timing-function:指定渐变的速度:
      1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
      2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);
      3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
      4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);
      5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
      6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
    • transition-delay:指定延迟时间,也就是经过多长时间才开始执行过渡过程。

 

 

浏览器兼容性

Internet Explorer 9 以及更早的版本,不支持 transition 属性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。

 

Animation

要使用animation动画,先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则。不同关键帧是通过from(相当于0%)、to(相当于100%)或百分比来表示(为了得到最佳的浏览器支持,建议使用百分比),

 

@keyframes定义好了,要使其能发挥效果,必须通过animation把它绑定到一个选择器,否则动画不会有任何效果。下面列出了animation的属性:

属性描述取值
animation所有动画属性的简写属性,除了 animation-play-state 属性 
animation-name规定 @keyframes 动画的名称 
animation-duration规定动画完成一个周期所花费的秒或毫秒默认是 0
animation-timing-function规定动画的速度曲线默认是 “ease”
animation-delay规定动画何时开始默认是 0
animation-iteration-count规定动画被播放的次数默认是 1(infinite:无限次
animation-direction规定动画是否在下一周期逆向地播放默认是 “normal”(reverse:反向播放;alternate:奇数次正向播放,偶数次反向播放;alternate-reverse:奇数次反向播放,偶数次正向播放。)
animation-play-state规定动画是否正在运行或暂停

默认是 “running”(paused:暂停动画)

 

 

浏览器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注意:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

 

Transform、Transition、Animation 的区别:

  Transform:对元素进行变形;
  Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
  Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。
 
  Transition与Animation:
  transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果。

 

以上大部分内容来自:http://blog.csdn.net/u014607184/article/details/51801393 ,感谢作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

综合云平台 - 前言 - 00

因为学习了 RHCA 云方向, 目前已经学了: CL210 OpenStack 私有云技术 CL220 CFME 混合云管理平台 RH236 GlusterFS 分布式存储 RH413 Hardening 安全 RH442 Performance Tuning 调优 RH318 Red Hat Enhanced Virtualization 虚拟化(传统虚拟机) DO280 OpenS…

15秋计算机基础作业3,东师15秋《计算机应用基础》在线作业3介绍.doc

计算机应用基础15秋在线作业3一、单选题(共?25?道试题,共?62.5?分。)V1.??国标码与机内码之间区别是A. 在机器内所占存储单元不同B. 机内码是ASCII码,国标码为非ASCII码C. 国标码是个每个字节最高位为1,机内码每个字节最高位为1D. 机内…

在Java中使用DOM,SAX和StAX解析器解析XML

我碰巧通读了有关Java中的XML解析和构建API的章节。 我试用了样本XML上的其他解析器。 然后,我想在我的博客上分享它,这样我就可以参考该代码以及任何阅读此书的参考。 在本文中,我将在不同的解析器中解析相同的XML,以执行将XML内…

仪器和软件通讯测试软件,软件定义的仪器-测试测量-与非网

如同每个孩子所拥有的第一套LEGO玩具改变了他们对世界的认识一样,26年前,美国国家仪器通过NI LabVIEW系统设计软件,重新改变了人们对仪器的认知。今年,NI将再次重演历史,发布一款新型仪器,帮助测试工程师摆…

埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 C序列变换...

链接&#xff1a;https://www.nowcoder.com/acm/contest/91/C来源&#xff1a;牛客网没有账号的同学这样注册&#xff0c;支持博主 题目描述 给定两个长度为n的序列&#xff0c;ai, bi(1<i<n), 通过3种魔法使得序列a变换为序列b&#xff0c;也就是aibi(1<i<n). 魔…

ubuntu安装gnome桌面

1. apt install gnome-shell2. apt install ubuntu-gnome-desktop3. apt install unity-tweak-tool4. apt install gnome-tweak-tool转载于:https://www.cnblogs.com/regit/p/7978365.html

Spring MVC,Ajax和JSON第1部分–设置场景

我一直在考虑在Spring&#xff0c;Ajax和JSON上写博客&#xff0c;但是我从来没有做过。 这主要是因为它非常复杂&#xff0c;并且所需的技术一直处于变化状态。 当我决定撰写此博客时&#xff0c;我在Internet上有一个侦察员&#xff0c;如果您查看诸如Stack Overflow之类的地…

oracle 运营维护_Oracle数据库日常运维常用脚本

大中小Oracle数据库日常运维常用脚本1 查看所有数据文件select file_name from dba_data_filesunionselect file_name from dba_temp_filesunionselect name from v$controlfileunionselect value from v$parameter where namespfileunionselect member from v$logfile;2 查看正…

柜员计算机技能,新入职柜员必备软件:柜员技能训练系统最新版

如果你是新入职柜员的大学生&#xff0c;这个软件你肯定用得着&#xff01;如果你是资格老的柜员同胞&#xff0c;这个软件你肯定用得着&#xff01;这个软件&#xff0c;针对柜员的小键盘、打字和点钞三项技能要求&#xff0c;专门针对痛点开发&#xff0c;可以有效训练柜员的…

Html5和Css3扁平化风格网页

前言 扁平化概念的核心意义 去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素&#xff0c;这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上&#xff0c;则强调了抽象、极简和符号化。 示例 视频效果&…

独立线性度 最佳直线

找到的散点线性拟合方法都是基于最小二乘法的&#xff08;numpy.polyfit()&#xff0c;scipy.optimize()) 以下是根据 GB/T 18459-2001中附录 A2 提供的独立线性度拟合方法&#xff0c;求得的最佳拟合直线 import mathdef find_line(x0, y0):根据散点求得端基直线k,b,并得到每点…

第4章 使用 Spring Boot

使用 Spring Boot 本部分将详细介绍如何使用Spring Boot。 这部分涵盖诸如构建系统&#xff0c;自动配置以及如何运行应用程序等主题。 我们还介绍了一些Spring Boot的最佳实践(best practices)。 虽然Spring Boot没有什么特殊之处&#xff08;它只是一个可以使用的库&#xff…

按功能而不是按层打包课程

大多数企业Java应用程序在设计上都有一些相似之处。 这些应用程序的打包通常由它们使用的框架&#xff08;如Spring&#xff0c;EJB或Hibernate等&#xff09;驱动。或者&#xff0c;您可以按功能对打包进行分组。 像其他任何有关建模的项目一样&#xff0c;这也不是没有任何问…

go mod依赖离线安装_Go语言go mod包依赖管理工具使用详解

go modules 是 golang 1.11 新加的特性。现在 1.12 已经发布了,是时候用起来了。Modules 官方定义为: 模块是相关 Go 包的集合。modules 是源代码交换和版本控制的单元。go 命令直接支持使用 modules,包括记录和解析对其他模块的依赖性。modules 替换旧的基于 GOPATH 的方法…

总是助手服务器失败怎么回事,《遇见逆水寒》连接服务器失败解决方法汇总 服务器连接失败问题原因...

导读遇见逆水寒连接服务器失败怎么回事&#xff0c;近期不少小伙伴都在反映遇见逆水寒助手连接服务器失败&#xff0c;一直登不上去是怎么回事&#xff0c;小编这就为大家分享下遇见逆水寒连接服务器失败解决方法。遇见逆水寒连接服务器失败解决方法...遇见逆水寒连接服务器失败…

Linux常用开发环境软件-redis安装

linux下安装redis3.2.11版本  1、安装编译环境 yum install gcc  //安装编译环境 2、到官网下载redis 官网地址&#xff1a;https://redis.io/download 3、用WinScp工具&#xff0c;将下载好的redis-3.2.11.tar.gz传输到linux服务器下的opt目录下(opt就相当于window的d://so…

小程序css

样式导入 import /** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ import "common.wxss"; .middle-p { padding:15px; } 全局样式跟局部样式 定义在 app.wxss 中的样式为全局样式&#xff0c;作用于每一个页面。在 page 的 wxss 文件中定义的样式…

项目第十一天

站立式会议&#xff1a; 燃尽图&#xff1a; 项目&#xff1a; 项目进展&#xff1a;系统完成&#xff0c;进行测试。 问题&#xff1a;测试的时候发现不知道如何进行系统的测试&#xff0c;所以测试内容的比较乱。 体会&#xff1a;从无到有完成一个项目&#xff0c;需要很多步…

JPA:确定关系的归属方

使用Java Persistence API&#xff08;JPA&#xff09;时&#xff0c;通常需要在两个实体之间创建关系。 这些关系是通过使用外键在数据模型&#xff08;例如数据库&#xff09;中定义的&#xff0c;而在我们的对象模型&#xff08;例如Java&#xff09;中则使用注释来定义关联…

huffman编码python_Huffman coding python实现

python实现的Huffman coding&#xff0c;给26个英文字母编码&#xff0c;inspired by Dave. 他只给出了Huffman tree的构建&#xff0c;并将walk_tree留给了提问者自己完成。我将walk_tree实现了一下并输出结果&#xff0c;做个记录&#xff0c;也顺便分享给有需要的同学。impo…