【CSS】-动画属性

css动画

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
【一些具体的效果，在文章结尾】
只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

none 没有定义转换

matrix 定义矩阵转换

translate

• translate(x,y)
• translate3d(x,y,z)
• translateX(x)
• translateY(y)
• translateZ(z)

scale 缩放转换

• scale(x,y)

• scale3d(x,y,z)

• scaleX(x)

• scaleY(y)

• scaleZ(z)

rotate 旋转转换

• rotate(angle)

• rotate3d(x,y,z,angle)

• rotateX(angle)

• rotateY(angle)

• rotateZ(angle)

skew 倾斜转换

• skew(x-angle,y-angle)

• skewX(angle)

• skewY(angle)

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

translate

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性。

@keyframes

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设置到另一个。

在动画过程中，您可以更改CSS样式的设置多次。

指定的变化时发生时使用％，或关键字“从”和“到”，这是和0％到100％相同

注意：使用animation属性来控制动画的外观，还使用选择器绑定动画。

使用:在设置元素样式里面定义

animation:mymove 5s infinite;

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}

补充：

使用动画（js实现动画，css3实现动画）时两者的区别？

• js实现的是帧动画
• css实现的是补间动画
  帧动画：使用定时器，每隔一段时间，更改当前的元素
  补间动画：过渡（加过渡只要状态发生改变产生动画）动画(多个节点来控制动画)性能会更好
  ps:
  在支持css3的浏览器尽可能的使用css3动画（适用于移动端开发）

transition animation
transition 组合写法（transition: all 1s linear 1s）