css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性
IE | Firefox | Safari | Chrome | Opera | |
---|---|---|---|---|---|
CSS 2D Transform | no | 3.5 | 3.2 | 2.0 | 10.5 |
CSS 3D Transform | no | no | 4.* (Mac) | no | no |
Transition | no | 3.7 | 3.2 | 2.0 | 10.5 |
Animation | no | no | 4.0 | 2.0 | no |
transform
这个比较简单,控制元素进行平面上的二维变换,有三个属性:
1. 旋转 rotate()。对元素按顺时针或逆时针方向进行旋转,其值为正数时,表示按顺时针方向旋转,其值为负数时,表示按逆时针方向旋转。单位为度数(deg)。例如:
ps:旋转属性可以实现那种常见的三角的tips效果。把一个正方形旋转45度就变成◆了,自己试试吧
2. 偏斜 skew(x,y)。有两个参数,第一个表示按x轴方向倾斜的度数,第二个是y轴的度数。主要的区别是,x轴的值若为正数,表示逆时针偏斜,若为负数,表示顺时针偏斜;而y轴的值跟x轴的刚好相反,正为顺,负为逆。
3. 平移 translate(x,y)。平移是一种利用x和y坐标值(单位为px)定位元素的方式,注意这个跟position的定位不一样,它参照的位置是它本身,但position参照的是父级。
transform:rotate(45deg); /*顺时针旋转45度*/ transform:rotate(-45deg); /*逆时针旋转45度*/transform:skew(30deg,10deg); /*在x轴方向逆时针偏斜30度,在y轴方向顺时针偏斜10度*/transform:translate(10px,15px); /*向左移动10px,向下移动15px*//*多个transform类型的设置可以写一起的,之间用空格分隔,例如上面的可以这样写:*/ transform:rotate(45deg) skew(30deg,10deg) translate(10px,15px)
transition
官方的解释是“允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或者对元素的任何改变中触发,并以圆滑的动画效果改变CSS的属性值”。比如原来的背景是#fff,hover时是#000,如果用了transition,就是从#fff平滑过渡成#000(发挥自己的想象力想一下吧)。
transition可以分解成4个属性:
1. transtion-property 用于指定哪些属性值改变时显示transition动画效果。none表示没有,all表示所有,或者用逗号分隔需要指定的属性,如transition-property: background,width,height.
2. transition-duration 表示动画持续时间,可以设置多个值,中间用逗号分隔,其中每个值对应transition-perproty设置的每个属性。例如:
transition-perproty: width,height; transition-duration:1s,0.5s /*表示宽度的转换动画持续的时间为1s,高度转换动画持续的时间为0.5s*/
3. transition-timing-function 表示转换动画的效果,有多个值可以选择:
1)Linear 指定一个线性渐变
2)ease 指定一个逐渐慢下来的动画
3)ease-in 指定一个先慢后快的渐变动画
4)ease-out 指定一个先快后慢的渐变动画
5)ease-in-out 指定一个先慢后快再慢的渐变动画
6)cubic-bezier 使用贝塞尔曲线来指定一个复杂的动画渐变效果(这个效果很不错,可以做比较复杂的效果,附带一个制作效果的网站:http://matthewlein.com/ceaser/)
4. transtion-delay 指定在动画开始前等待的时间,不需要时可以省略。
animation
animation比transition更接近动画的含义,可以为animation设置多帧的效果,然后把这些帧组合、变换,按动画效果显示出来。共有6个属性,在了解它的属性之前,首先有必要先熟悉一下关键帧keyframes这个属性。
keyframes 从字面上看,keyframes表示关键帧的意思。在flash里面也存在这个概念,我们可以想想一张gif动画由一帧一帧的图像组成。在CSS3里,我们用keyframes描述第一帧的效果,用animation描述每一帧如何组合在一起以及表现的效果。格式如下:
@keyframes 动画标识名{ /*动画标识名将被animation-name属性所引用*//*每一帧的动画效果,可以通过百分比数值加样式的形式来定义*/0%{background-color: white;}50%{background-color: red;} 100%{background-color: black; } } /*我们可以把百分比数值看做第一帧在动画中时间轴的位置,0%在时间轴的开始,50%在时间轴的正中,100%在时间轴的终点。那以上的动画效果就是,元素的背景颜色会从白色渐变成红色,再从红色渐变成黑色。0%和100%也可以分别用form和to来代替*/ @keyframes 动画标识名{from{background-color: white;}50%{background-color: red;} to{background-color: black; } }
属性:
1. animation-name 此属性指定动画应对的keyframes,比如设置animation-name为loading,那么动画就对应@keyframes loading所声明的关键帧。如果没有定义关键帧,动画将不会生效。
2. animation-duration 定义一次动画的持续时间,默认值为0
3. animation-delay 定义从触发到开始动画的时间
4. animation-timing-function 定义动画显示的效果,例如先快后慢,先慢后快等,属性值与transition-timing-function相同
5. animation-iteration-count 该属性定义动画循环的次数,默认为1。我们可以用infinite来使动画无限次循环,这是transition动画所无法支持的。
6. animation-direction 定义动画播放的方向,默认值为normal,代表每次动画都向前播放。另外一个值是alternate,第偶数次动画向前播放,第奇数次逆向播放。
要注意在写以上的属性时,都要根据不同的浏览器加上前缀,-webkit-,-o-,-ms-,-moz-
附带相关链接:
http://www.w3cplus.com/content/css3-transform(transform)
http://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html(transition)
http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html(animation)
css3动画模块transform transition animation属性解释相关推荐
- CSS3 新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等. transform属性有一项奇怪的特性,就是它们对于其周围 ...
- css:transform,transition,animation总结
1. transform 2d 名称 说明 transform 变形功能 transform-orign 指定变换起点 1.1 transform的属性值 名称 说明 参数 translate/tra ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- css动画效果 transform transition @keyframes animation 涉及jquery
1.transform: translateY(100px); 但是transform在单独使用的时候并不会产生动画效果, 页面加载的时候就已经在变化后的状态了,所以需要搭配transition使用, ...
- css动画详解 (transition animation)
属性 transition(4个属性): transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transi ...
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
- 一起领略css3动画的强大
CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不 ...
- css3动画字幕_使用CSS3动画创建高级“字幕”
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 今天,我们将再次看一看"字幕 ...
- CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
最新文章
- django 解决cors问题
- JS原生方法实现jQuery的ready()
- 华为鸿蒙麒麟玉兔_华为P50除了麒麟9000,还预装鸿蒙系统,比iPhone12值得买
- Qt文档阅读笔记-Qt Quick Examples - Text 初步解析
- 突击计划——求整数中的较大者
- 编程算法 - 最小的k个数 红黑树 代码(C++)
- 13、第七 - 网络编程基础 - Python中协程EVENT()函数-事件函数
- yarn临时目录 没有jar包_Yarn(Haoop组件之一)介绍
- 数学原理(The Principles of Mathmatics)
- 在Unity中使用键盘操作UI
- 【精选】申请免费的服务器
- .shtml网站解析UnicodeError
- 求html写一个羽毛球拍的代码,一种组合式羽毛球拍的制作方法
- 《12个工作的基本》读书分享
- 山水之道第五境——精灵的天地大阵
- 【matplotlib】绘图模块介绍
- 高中数学必考知识点:二元一次不等式(组)及简单的线性规划问题
- 一起自学SLAM算法:8.1 Gmapping算法
- Linux的账号与权限管理
- 秒懂mysql中的group by用法
热门文章
- php查询每个小时的数据,php – MySQL显示表中每小时的条目数
- 怎样把一个项目加入微服务器,构建微服务:快速搭建Spring Boot项目
- excel插入一列日期 pandas_将日期和时间从Excel拉到Pandas并将其组合为时间戳
- 增加数据_太原二手房七月数据出炉,挂牌量增加800余套,万柏林区涨幅大
- linux系统硬盘数据恢复软件下载,Linux硬盘数据恢复软件
- JavaScript基础(一)基本认识
- 代码整洁之道----读书笔记
- SpringBoot日记——ElasticSearch全文检索
- Redis 哨兵模式 带密码单机
- zepto和jquery的区别,zepto的不同使用8条小结