CSS过渡、变形、2D转换小结

过渡：

语法规则
选择器{
    transition:property duration timing-function delay
}
tansition属性实现简单的动画效果
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性
div{

      transition: width 2s;

   }

transiton子属性：

property：规定应用过渡的CSS属性的名称

 

取值：

none：没有属性会获得过渡效果

all：默认值，所有属性获得过渡效果

property:定义 应用过渡效果的CSS属性名称列表

duration：定义过渡效果花费的时间

 

 

取值：

time值：以秒或毫秒计，默认是0，意味着没有任何效果

timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
delay：规定开始之前需要等待的时间

取值：

time值：以秒或毫秒计，默认是0

变形：

语法规则：

选择器{

 transform:none | transiform-functions

}

tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表

div{

      transform: rotate(7deg);

   }

rotate(angel)

旋转元素

skew(x-angel,y-angel)

倾斜元素

skewX(angel)

沿着X轴倾斜

skewY

沿着Y轴倾斜

scale(x,y)

缩放元素，改变元素的高度和宽度

scaleX

改变元素的宽度

scaleY

改变元素的高度

translate(x,y)

移动元素对象，基于x和y坐标重新定位元素

translateX(x)

沿着x轴移动元素

translateY(y)

沿着Y轴移动元素

动画：

关键帧
关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。

关键帧语法规则：

@keyframes animationname{

 keyframes-selector{css-style}

}

animationname是当前动画的名称

keyframes-selector:是关键帧选择器

css-style:当前关键帧的动画状态

animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。

语法规则：

div:hover{

      animation: rotate 0.5s

      linear infinite

   }

选择器{

 animation:name duration timing-function

  delay iteration-count

}

tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表

animation子属性：

animation-name：规定@keyframes动画的名称

 

取值：

keyframe name：规定需要绑定到选择器的keyframe的名称

none:规定无动画效果（可用于覆盖来自级联的动画)

animation-duration：规定动画完成一个周期所花费的时间

 

取值：

time值：以秒或者毫秒计算，默认是0

animation-timing-function：规定过渡效果的时间曲线

取值：

linear:规定以相同速度开始至结束的过渡效果

ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。

ease-in：规定以慢速开始的过渡效果

ease-out：规定以慢速结束的过渡效果

ease-in-out：规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。

animation-delay：规定开始之前需要等待的时间

取值：

time值：以秒或毫秒计，默认是0

animation-iteration-count：规定动画播放的次数

取值：

n：定义动画播放次数的数值，默认为1

infinite：规定动画应该为无限次播放