CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform、transition以及animation，这三个属性大大提升了css处理动画的能力。
一、Transform 变形
CSS中transform 属性允许你修改CSS可视化模型的坐标控件。使用transform，元素可以安装设定的值变形、旋转、缩放、倾斜。
语法：
transform ： none | <transform-function> [ <transform-function> ]* 也就是：transform: rotate | scale | skew | translate |matrix;
对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。
在IE9中，使用jQuery动态添加样式，不显示效果，其他浏览器显示正常。是因为IE9认为 -ms-transform是无效的脚本，不执行。请将 "-ms-transform"改为“msTransform”。
这里介绍一个在线调试CSS3的工具，http://westciv.com，这个工具还可以调试Gradients、Shadows等属性。
1、transform-origin属性
transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。受影响变形函数：rotate()、scale()、skew()、matrix()。语法：
transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
2、旋转rotate
从原点(由transform-origin属性指定)开始安装顺时针方向旋转元素一个特定的角度。
| 旋转30度，transform-origin为默认值 | 旋转30度，transform-origin为left，top |
.rotate{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);
}
.transform_left_top{-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;
}3、移动translate
移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。X或Y取值百分比的时候，相对于自身的宽与高。
|
x轴移动50px，y轴移动20px transform-origin为默认值 |
x轴移动50px，y轴移动20px transform-origin为left，top |
设置transform-origin与不设置不影响移动。
.translate{-webkit-transform:translate(50px,20px);-moz-transform:translate(50px,20px);-o-transform:translate(50px,20px);-ms-transform:translate(50px,20px);transform:translate(50px,20px);
}4、缩放scale
缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
|
scale(1.5,1) transform-origin为默认值 |
scale(1.5,1) transform-origin为left，top |
.scale{-webkit-transform:scale(1.5,1);-moz-transform:scale(1.5,1);-o-transform:scale(1.5,1);-ms-transform:scale(1.5,1);transform:scale(1.5,1);
}5、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
|
skew(30deg, 10deg) transform-origin为默认值 |
skew(30deg, 10deg) transform-origin为left，top |
.skew{-webkit-transform:skew(30deg, 10deg);-moz-transform:skew(30deg, 10deg);-o-transform:skew(30deg, 10deg);-ms-transform:skew(30deg, 10deg);transform:skew(30deg, 10deg);
}6、矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，matrix矩阵是transform变换的基础，可以应付很多高端的效果，算是一种高级应用技巧。网上有专门介绍这个的用法，我这里就不详细介绍了。有个在线编辑matrix的网站，useragentman.com。可以在线调试，下图所示：
w3school在线测试：
| 值 | 描述 | 测试 |
|---|---|---|
|
none |
定义不进行转换。 | 测试 |
|
matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 | 测试 |
|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
|
translate(x,y) |
定义 2D 转换。 | 测试 |
|
translate3d(x,y,z) |
定义 3D 转换。 | |
|
translateX(x) |
定义转换，只是用 X 轴的值。 | 测试 |
|
translateY(y) |
定义转换，只是用 Y 轴的值。 | 测试 |
|
translateZ(z) |
定义 3D 转换，只是用 Z 轴的值。 | |
|
scale(x,y) |
定义 2D 缩放转换。 | 测试 |
|
scale3d(x,y,z) |
定义 3D 缩放转换。 | |
|
scaleX(x) |
通过设置 X 轴的值来定义缩放转换。 | 测试 |
|
scaleY(y) |
通过设置 Y 轴的值来定义缩放转换。 | 测试 |
|
scaleZ(z) |
通过设置 Z 轴的值来定义 3D 缩放转换。 | |
|
rotate(angle) |
定义 2D 旋转，在参数中规定角度。 | 测试 |
|
rotate3d(x,y,z,angle) |
定义 3D 旋转。 | |
|
rotateX(angle) |
定义沿着 X 轴的 3D 旋转。 | 测试 |
|
rotateY(angle) |
定义沿着 Y 轴的 3D 旋转。 | 测试 |
|
rotateZ(angle) |
定义沿着 Z 轴的 3D 旋转。 | 测试 |
|
skew(x-angle,y-angle) |
定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
|
skewX(angle) |
定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
|
skewY(angle) |
定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
|
perspective(n) |
为 3D 转换元素定义透视视图。 |
二、Transition过渡
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
语法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||<'transition-delay'> [,[ <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
| 属性 | 说明 |
|
transition-property |
规定设置过渡效果的 CSS 属性的名称。 |
|
transition-duration |
规定完成过渡效果需要多少秒或毫秒。 |
|
transition-timing-function |
规定速度效果的速度曲线。 |
|
transition-delay |
定义过渡效果何时开始。 |
1、transition-property
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。
2、transition-duration
transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。
3、transition-timing-function
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
|
ease |
（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) |
|
linear |
（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) |
|
ease-in |
（加速），ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) |
|
ease-out |
（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0) |
|
ease-in-out |
（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) |
|
cubic-bezier |
（该值允许你去自定义一个时间曲线）可以使用工具网站来定制 |
cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default
其他几个属性的示意图：
4、transition-delay
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。
下面做个简单事例，在移到方块的时候，将方块的width增加
| :hover之前 | :hover之后 |
.a_border{display:block;width:80px;background:#e0e0e0;text-align:center;line-height:80px
}
a.a_border:hover{width:150px;-webkit-transition:width 0.5s linear 1s;-moz-transition:width 0.5s linear 1s;-o-transition:width 0.5s linear 1s;-ms-transition:width 0.5s linear 1s;transition:width 0.5s linear 1s;
}三、Animation动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3的Animation是由“keyframes”这个属性来实现动画效果，Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。可以在这个Tencent网站上面做在线的动画调试。
各自的语法：
animation：<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';keyframes-blocks: [ keyframe-selectors block ]* ;keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0，意味着没有动画效果。 | 3 |
| animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 还有linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) |
3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count |
规定动画被播放的次数。默认是 1。下面是其他值： "infinite"：规定动画应该无限次播放 |
3 |
| animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。下面是其他值： "alternate"：动画应该轮流反向播放 "reverse"：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持） "alternate"：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。 "alternate-reverse"：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持） |
3 |
| animation-play-state |
规定动画是否正在运行或暂停。默认是 "running" "paused"是指规定动画已暂停 |
3 |
| animation-fill-mode |
规定对象动画时间之外的状态。 "forwards"指当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） "backwards"指在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） "both"同时配置了forwards和backwards。在动画显示之前，应用第一帧；动画结束时，应用最后一帧 |
3 |
看一个实例：
这句话I am moving将会在左右来回移动，并且在执行到一半的时候字体放大。
.animation1{-moz-animation-duration: 3s;-moz-animation-name: slidein;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-webkit-animation-duration: 3s;-webkit-animation-name: slidein;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-o-animation-duration: 3s;-o-animation-name: slidein;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-ms-animation-duration: 3s;-ms-animation-name: slidein;-ms-animation-iteration-count: infinite;-ms-animation-direction: alternate;animation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;animation-direction: alternate;
}
@keyframes slidein {from {margin-left:100%;width:300%}50% {font-size: 300%;margin-left: 25%;width: 150%;}to {margin-left:0%;width:100%;}
}
@-moz-keyframes slidein {from {margin-left:100%;width:300%}50% {font-size: 300%;margin-left: 25%;width: 150%;}to {margin-left:0%;width:100%;}
}
@-webkit-keyframes slidein {from {margin-left:100%;width:300%}50% {font-size: 300%;margin-left: 25%;width: 150%;}to {margin-left:0%;width:100%;}
}
@-o-keyframes slidein {from {margin-left:100%;width:300%}50% {font-size: 300%;margin-left: 25%;width: 150%;}to {margin-left:0%;width:100%;}
@-ms-keyframes slidein {from {margin-left:100%;width:300%}50% {font-size: 300%;margin-left: 25%;width: 150%;}to {margin-left:0%;width:100%;}
}一些网上的在线实例：
|
多个3D盒子(滑入/滑出) |
3D菜单 |
附件下载：
animation.rar
参考资料：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html CSS动画简介
http://www.w3cplus.com/content/css3-animation CSS3 Animation
http://www.w3cplus.com/content/css3-transform CSS3 Transform
http://www.w3cplus.com/content/css3-transition CSS3 Transition
http://www.w3school.com.cn/cssref/pr_transition.asp CSS3 transition属性
http://www.w3school.com.cn/cssref/pr_transform.asp CSS3 transform属性
http://ecd.tencent.com/css3/guide.html 动画手册
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference CSS属性参考 里面有浏览器兼容显示
CSS3中的动画效果记录相关推荐
- CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
- 在html中加动画效果,html5中css3新添加的动画效果
字css3中,动画着重要说的就是:transition属性,表示过渡 (1) 如何定义一个动画: 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. div { width:100 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- 25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
- css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
- JQuery中的动画效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...
- HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换 案例 ...
- 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
最新文章
- CYQ.Data 轻量数据层之路 使用篇三曲 MAction 取值赋值(十四)
- Spring MVC使用webSocket保持长连接
- Python中的端口协议之基于UDP协议的通信传输
- Codeforces 920E-Connected Components? （set，补图，连通块）
- python作业题目用户输入行数、输出倒的等腰三角形_智慧职教云课堂APPPython程序设计（常州工业职业技术学院)作业期末考试答案...
- 使用aggregate在MongoDB中查找重复的数据记录
- JAR包、WAR包及EAR包的区别
- ElasticSearch通配符 * 查询（英文检索）
- 关于arp.exe的一点应用
- Python——常见数据类型的调试笔记（“如何通过Debug信息判断数据类型”）
- Netty框架中的@Skip使用说明
- [原创]Android SDK下载(Linux下载SDK最新教程2020.11.26)
- windows下创建本地局域网svnserver和gitserver
- 鸿基酒店应收应付报表生成系统
- yuki翻译器钩子_YUKI GALGAME翻译器
- JAVA:实现求Median中位数算法(附完整源码)
- Android 创建随机数生成器
- tc的linux命令详解,linux tc命令详解
- linux 查找后删除目录,linux中find与rm实现查找并删除目录或文件
- 生存分析 R语言（四）——Cox PHM(3) 检查PHA和scale
热门文章
- MAC 设置$PATH 关闭terminal后就失效 解决方案
- mysql数据库服务器名_mysql数据库服务器名
- java se是不是java_Java SE和java EE究竟有什么实质上的区别
- oracle的基本概念,oracle的基本概念
- 图片句柄_PC微信逆向：自动保存加密的聊天图片
- 表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据（响应）
- array函数参数 scala_scala – 在Spark SQL中将数组作为UDF参数传递
- kafka通过脚本一次启动集群
- Linux修改hostname的几种方式,及遇到的问题
- 机器学习笔记（十二）——马尔科夫模型