阅读 142

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位置不动,也就像右移动了100pxY轴同理
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() 矩阵对象确实是无从下笔,因为内容有点杂,涉及离散数学。想深入学习可以去看一些比较深入的文章

关注下面的标签,发现更多相似文章
评论