css3的新特性transform,transition,animation

一、transform

css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性

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,%等等。

二、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:0

3）触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。

 

三、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:告诉浏览器将元素的格式保持为动画结束时候的样子。