本文主要是介绍CSS3 新特性transform,transition,animation，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、transform
css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。
transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。
旋转：transform:rotate(-45deg);
缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)
移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。
倾斜：transform:skew(45deg,0);
当然，以上多个tranform的属性可以结合使用；
transform-origin:一般来说，当对一个元素使用transform时，web浏览器就会以元素的中心点作为变黄点。该属性可以指定变换点，可以提供关键字，以pixel为单位的绝对值，以及em,%等等。
3D 转换属性
| 属性 | 描述 |
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
transform-style: flat|preserve-3d; 表示所有子元素在3D空间中呈现。
perspective: number|none; 设置元素的景深。
如：perspective: 500;
二、transition
transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。
为了使transition生效，需要做这么几件事：
2）两个样式：一个是最初的样式，一个是最终的样式，transition可以实现这两种演示见的转换过程。
2）transition属性:
transition使用4个属性控制：
要以动画展示哪些属性（transition-property）:可以使用all关键字
动画过程有多久(transition--duration),
控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），
动画是否延迟执行（transition-delay）等
可以使用快捷方法来定义上述属性：
.navButton{color:black;background-color:#fff;transition:color,background-color;transition-delay:1s, .5s;
}.navButton:hover{color:red;background-color:#ccc;
} 一般来说，将transition属性应用到最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式，再返回最初样式的变化过程。
不过，在使用css下拉菜单的时候，有一个技巧，为了防止鼠标离开菜单的时候，菜单很快消失，可以利用transition-delay让元素很快显示，但是慢慢消失，做法是，在初始样式中添加如下代码：
transition-dealy:.5s在：hover中不要添加延迟：
transition-delay:03）触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。
| 属性 | 描述 |
| transition | 简写属性，设置以下四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
三、animation
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。
动画应用的两个步骤：
1.定义动画：主要指定义关键帧
@keyframes fadeIn{from{opacity:0;},to{opacity:1; }
}2.将动画应用到元素上
可以使用一下css属性定义动画：
.nav-button{animation-name:fadeIn;animation-duration:1s;animation-timing-function:ease-out,animation-delay:.5s;animation-iteration-count:infinite; animation-direction:alternate
} animation-name:和当初定义的动画名称相对应；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间长度；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字：infinate(无限运行)；
animation-direction:alternate;alternate(奇数次超前运行，偶数次后退运行)，如希望动画从黄色到蓝色，并且再重复一次，使用alternate关键字就能够防止从蓝色突变为黄色 animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。
这篇关于CSS3 新特性transform,transition,animation的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
