html 动画过度转换的用法,css3 转换 过渡 及动画

转换transform：

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。您可以使用 2D 或 3D 转换来转换您的元素

2D转换属性：

transform 向元素应用 2D 或 3D 转换

transform-origin 允许你改变被转换元素的位置。

2D Transform 方法：

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。

scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

scaleY(n) 定义 2D 缩放转换，改变元素的高度。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性：

transform 向元素应用 2D 或 3D 转换。

transform-origin 允许你改变被转换元素的位置。

transform-style 规定被嵌套元素如何在 3D 空间中显示。

perspective 规定 3D 元素的透视效果。

perspective-origin 规定 3D 元素的底部位置。

backface-visibility 定义元素在不面对屏幕时是否可见。

3D Transform 方法：

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 个值的 4x4 矩阵。

translate3d(x,y,z) 定义 3D 转化。

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。

translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿 X 轴的 3D 旋转。

rotateY(angle) 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图。

过渡transition:

当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性：

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 。

css3动画：

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

动画实例：

把 "myfirst" 动画捆绑到 div 元素，时长： 秒：

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

-webkit-animation: myfirst 5s; /* Safari 和 Chrome */

-o-animation: myfirst 5s; /* Opera */

}

@keyframes myfirst

{

% {background: red;}

% {background: yellow;}

% {background: blue;}

% {background: green;}

}

@-moz-keyframes myfirst /* Firefox */

{

% {background: red;}

% {background: yellow;}

% {background: blue;}

% {background: green;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

% {background: red;}

% {background: yellow;}

% {background: blue;}

% {background: green;}

}

@-o-keyframes myfirst /* Opera */

{

% {background: red;}

% {background: yellow;}

% {background: blue;}

% {background: green;}

}

总结：过渡是可以通过转换和动画来实现的

css3的过渡、动画、2D、3D效果

浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

前端：css3的过渡与动画

一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果.      2.实现过渡效果的两个要件:    规定把效果添加到那个css属性上.    规定效果时长 定义 ...

css3的过渡和动画的属性介绍

一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...

常用到用css3实现的转换，过渡和动画

为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

CSS3中2D/3D转换、过渡、动画

转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

css3基础-文本与字体+转换+过渡+动画+案例

Css3文本与字体   文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...

15款css3鼠标悬停图片动画过渡特效

分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码:

CSS3的过渡和转换

CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

重新想，重新看——CSS3变形，过渡与动画④

最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...

随机推荐

html 杂记

css样式外部链接 加个斜杠 ...

用c#操作Mongodb(附demo)

因为需要,写了一个基于泛型的helper,这样要使用起来方便一点. 为了大家也不重复造轮子,所以发出来希望能帮到谁. 复杂的查询最好用linq,这也是mongodb官方建议的. mongodb的C#配 ...

ubuntu安装ssh

为了解决远程连接ubuntu服务器控制端,方便操作.ubuntu不同的版本安装方式一致!首先在ubuntu服务器下安装SSH服务linux安装命令:sudo apt-get install opens ...

Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法

Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法 找到tomcat映射文件Service.xml,将文件中的conte ...

eclipse 配置黑色主题

虽然以前也使用eclipse的黑色主题,但是配置起来稍微麻烦一点. 这里先声明,下面的方式适合最新版本的Eclipse Luna,旧的版本可以下载我提供的这个插件,并将其放在eclipse目录下的pl ...

MySql查找几个字段的值一样的记录

),name,class,charge_start,charge_end ) ; 注意:having在这里起到很大的作用,只有在having中,才可以对类似sum(),count()等等复合函数的结果 ...

Mapreduce读取Hbase表，写数据到多个Hbase表中

Job端的变化: 通过设置conf,配置输出表,在reduce中获取输出表名字 Configuration conf = job.getConfiguration(); //输出表1 conf.set ...

leetcode@ [91] Decode Ways (Dynamic Programming)

https://leetcode.com/problems/decode-ways/ A message containing letters from A-Z is being encoded to ...

Python学习 - 输入和输出

#输出 print('hello, python') print('The quick brown fox', 'jumps over', 'the lazy dog') #多个字符串,用逗号隔开,就 ...

Explanation About Initilizing A DirextX3D Class 关于初始化Direct3D类的解释

目录 DirectX11 Study Note Create a DirectX graphics interface factory.创建一个DirectX图形界面工厂 CreateDXGIFact ...