css之动画------第一篇blog

transform

transform能做三件事:

旋转：rotate

平移：translate

放缩：scale

注意：这三件事可以同时做,代码：

transform:rotate(-45deg(角度)) translate(100px,0) scale(2,0.5)

transform可以指定沿着x、y轴变形；

transformX、transformY、rotateX、rotateY、transitionX、transitionY

transform可以指定旋转、变形的中心：

transform-origin:

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

3DTansform:

实现旋转时有近大远小的视觉效果

perspective:10em;

<!- 这里设置的是人眼到屏幕的距离-!>

transform不会对其他元素布局产生影响

 

transition

属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

例如：transition:all 2s ease-in;

all:面向全部需要改变的属性，当然也可以改为width、height等具体的属性

2s:变化持续时间，一般都是s为单位

ease-in:描述先快后慢

第四个（默认为0）可以设置时间，例如，1s

tansition-timing-function:

加强版的transition:animation

关键帧：

@keyframes down{

  from{}

  x%{}

  to{}

}

定义：

animation: down 1.5s ease infinite;

transparent：

先看一部分css

<style>
.test {
color: transparent;
border: 1px solid transparent;
background: transparent;
}
</style>

transparent在css3中可以应用于所有有color的属性上，如果我们需要它透明的话hh，有时候还是很重要的，比如当你设置background为某个颜色时，当你需要这个颜色消失时，就可以设为transparent。

还有比如，如果要显示下层的div时，也可以用它来实现。