CSS3的过渡，动画，图形转换

CSS3的学习小节

迟来的CSS3学习，在CSS3中，增长了许多的新特性，像过分动画，圆角，媒体查询...等等新的特性，能够给咱们开发者平常使用。

过渡

过分动画关键字【transition】 transition : css属性 时间 方式 时间 详细写就是:

• transition-property 规定须要过渡的css属性名称
• transition-duration 规定过渡效果须要花费的时间
• transition-timing-function 规定过渡效果的时间曲线
• transiity-delay 规定过渡效果开始的时间

DEMO:当鼠标移入，宽度将从 100px => 300px之间的动做

# HTML
<section>my tranition Demo</section>
# CSS
<style>
        section{
            width: 100px;
            height: 100px;
            border-radius : 10px;
            background-color: cadetblue;
            transition : width 2s ease 0.2s;
        }
        section:hover{
            width: 300px;
        }
    </style>
复制代码

各个transition的属性值

/* transition-property */
transition-property : none|all|属性列表(多个能够用逗号分开)
/* transition-duration */
transition-duration : 时间（秒或者毫秒）
/* transition-timing-function */
transition-timing-function : 
/*
1.linear : 开始到结束都是一个速度(匀速运动)
2.ease : 从慢速开始，逐渐变快，而后慢速结束(抛物线运动)
3.ease-in : 以慢速开始的过渡
4.ease-out : 以慢速结束的过渡
5.ease-in-out : 慢速开始和结束的过渡
6.cubic-bezier : 在函数中自定义本身的值
*/
/* transition-delay */
transition-delay: 时间(执行过渡开始的时间)
复制代码

动画

要建立CSS动画，你须要了解keyframes规则和animation属性。 @keyframes须要规定变化发生的时间，可使用百分好比0%,50%,100%等等，也能够用from和to表示0%和100%。0%是动画的开始，100%是动画的结束。 Demo

/* 建立@keyframes规则 from and to*/
 @keyframes anim{
 from {
  width: 150px;
  height: 150px;
  background-color: blue;
  }
  to {
    width: 400px;
    height: 400px;
    background-color: beige;
    } 
}
/* 百分比方式 */
@keyframes anim1{
  0% {
  width: 150px;
  }25% {
  width: 300px;
  }50% {
  width: 150px;
  }100% {
  width: 300px;
  }
}
复制代码

animation属性

animation的属性列表

• animation-name : @keyframes的名称值
• animation-duration : 动画指定的完成时间
• animation-timing-function : 规定动画的时间曲线
• animation-delay ： 设置动画开始的时间
• animation-iteration-count : 动画播放次数
• animation-direction ：是否反复播放动画
• animation-fill-mode : 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• animation-play-state : 动画状态，是否在运行

/* animation-name ps:上面已经定义了@keyframes*/
animation-name : anim;
/* animation-duration */
animation-duration : 5s;
/* 
animation-timing-function
具体能够参考transition-timing-function
*/
animation-timing-function :  linear;
animation-timing-function :  ease;
animation-timing-function :  ease-in;
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
/* animation-delay--给定一个时间 */
animation-delay : 3s; 
/*animation-iteration-count : n(次数)|infinite(一直)*/
animation-iteration-count : 2 | infinite;
/* animation-direction */
animation-direction : normal /* 正常播放 */
animation-direction : reverse /* 反向播放 */
animation-direction : alternate /* 奇数正常播放，偶数反向播放 */
animation-direction : alternate-reverse /* 奇数反向播放，偶数正常播放 */
animation-direction : initial /* 默认值 */
animation-direction : inherit /* 父元素继承 */
复制代码

图形的转换

在学习transform的时候须要理解2D和3D的区别，2D的话说简单点就是在一个象限之间的操做，或者是经过自己的X,Y轴进行，而3D是一个立体的，会在X,Y,Z轴中进行转换，区别如同一个正方形和正方体通常。

2D转换

经过transform字段和其2D方法进行操做，2D方法以下：

• translate()
• rotate()
• scale()
• skew()
• matrix()

/* tanslate(x,y) 根据设定的XY参数，从当前元素位置移动 */
# 向X位置移动100px,Y位置不动，也就像右移动了100px，Y轴同理
transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
-webkit-transform:translate(100px,0px);

/* rotate() 给定一个参数，使元素顺时针旋转，若是负值将逆时针旋转 */
# 顺时针旋转45度
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

/* scale() X，Y轴方法缩放多少倍 */
# X,Y轴放大两倍
transform: scale(2,2);
-ms-transform: scale(2,2);
-webkit- transform: scale(2,2);

/* skew() 斜切 */
# skewX X轴倾斜
# skewY Y轴倾斜
transform: skew(30deg,30deg);
-ms-transform: skew(30deg,30deg); 
-webkit-transform: skew(30deg,30deg ); 
复制代码

matrix() 矩阵对象

提及来可能会有一点抽象，该方法的初始值为 matrix(1,0,0,1,0,0) 可能不是很是好理解，具体能够去看一下别人总结的数学公式 Demo

# 矩阵
--    --
|1 2 3 |
|4 5 6 |
|7 8 9 |
--    --
复制代码

transform-origin

tranform-ogigin容许你修改元素的X,Y,Z轴。相对于2D和3D来说。

/* transform-origin:X Y Z */
transform-origin: 300px 300px;/* 能够是百分比，也能够是位置单位 */
复制代码

3D转换

transform的3D转换的一些经常使用方法和属性以下

• rotateX()
• rotateY()
• transform-style
• perspective
• perspective-origin
• backface-visibility

/* rotateX() 围绕X轴顺时针转动 */
# X轴顺时针转动100度
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg); 
/* rotateY() 围绕Y轴顺时针转动 */
# Y轴顺时针转动100度
transform: rotateY(100deg);
-webkit-transform: rotateY(100deg); 
复制代码

transform-style

transform-style属性指定嵌套元素是怎样在三维空间中呈现。

/* transform-style */
# flat ： 全部子元素都在2D平面呈现
# preserve-3d ： 表示全部子元素都在3D平面呈现
transform-style: flat;
transform-style: preserve-3d;
复制代码

perspective

perspective表示3D元素的透视，定义的perspective属性，它是一个元素的子元素，透视图，而不是元素自己。

perspective: none;/* 不透视 */
perspective: 200px;/* 透视的区域 */
复制代码

perspective-origin

perspective-origin属性定义3d元素所基于的X,Y轴，该属性容许你修改元素的底部位置，具备x-axis和y-axis参数

/* x-axis参数具备几种可能 */
# left
# center
# right
# length
# %百分比
/* y-axis参数具备几种可能 */
# left
# center
# right
# length
# %百分比
复制代码

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见，在旋转元素不但愿看到背面的时候使用效果很好。

/* backface-visibility */
backface-visibility: visible; /* 背面是可见的 */
backface-visibility: hidden; /* 背面是不可见的 */
复制代码

总结

迟来的css3trans**系列学习，都是一些常识性的学习，主要是一些状况下使用不至于特别懵逼。matrix() 矩阵对象确实是无从下笔，由于内容有点杂，涉及离散数学。想深刻学习能够去看一些比较深刻的文章