最近在学习CSS动画相关的知识,于是连带着把会用到的一些知识点进行了一些整理。在此,做一下总结。
Transform
CSS3中引入的transform
属性可以让元素实现变形,旋转,缩放等视觉效果。
2D变化
2D的transform
应用在x和y轴上,而3D的则多了一条z轴。
1. Rotate旋转
.box {
transform: rotate(20deg); //顺时针
}
.box2 {
transform: rotate(-20deg); //逆时针
}
可以将一个元素绕着旋转点进行0到360度的旋转操作。默认的旋转点是在元素的中心点上(50% 50%)。
2. Scale缩放
.box {
transform: scale(.5); //缩小为原来的一半
}
.box2 {
transform: scale(2); //放大为原来的两倍
}
你也可以只针对宽度或者高度进行缩放操作。
.box {
transform: scaleX(2); //将宽度变为原来的两倍
}
.box2 {
transform: scaleY(.25); //将高度变为原来的25%
}
3. Skew 倾斜
.box {
transform: skewX(-5deg); //X轴顺时针旋转5度
}
.box1 {
transform: skewY(20deg); //Y轴逆时针旋转20度
}
.box3 {
transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}
4. Translate 平移
.box {
transform: translateX(-10px); //在横轴上向左平移10个像素点
}
.box2 {
transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}
.box3 {
transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}
5. Matrix矩阵
矩阵形式是将变形函数组合成一个矩阵形式进行使用的,通常都需要借助工具。更详细的说明可以参考这里。
这些变形模式可以同时作用在一个元素上。如
.box { transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2); }
Transfrom Origin
默认的变换原点是在元素的中心,如果我们想要改变它,可以使用属性transform-origin
。它接受两个值,分别指定X和Y轴上的位置。可以使用px或百分比作为单位,也可以使用bottom
,left
等值进行定义。
.box {
transform: rotate(15deg);
transform-origin: 0 0; //以左上角点为变换点进行旋转
}
3D变化
3D是以2D变化为基础的,只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴,它代表在元素的远近距离。其中正值代表离屏幕越近,负值代表离屏幕越远。
Perspective
perspective
在中文中翻译为透视,这个属性值在应用中主要是用来指定元素离观看者的距离,值的设定一般来说设置为< 300px
时会有强烈失真,500~1000px
失真中等,2000px
以上失真轻微。
定义perspective
属性可以选择直接定义在transform
中,如:
.box {
transform: perspective(300px) rotateX(20deg);
}
也可以选择定义在父元素上,这样,所有子元素都将使用这个值:
.parent {
perspective: 300px;
}
.child {
transform: rotateX(20deg);
}
perspective-origin
这个属性是叫做“透视原点”,可以使用X轴与Y轴的长度数据或百分比,以及left/center等值进行设置。默认值为50% 50%。可以看做镜头在平面上的距离。
backface-visibility
这个属性用来控制是否可以看到被挡住的那些面,它的值分为visible
或hidden
。
Transition
transition
主要是用来做过渡效果的,可以提供使元素间的变化显得不那么生硬。
属性 | 值 | 作用 |
---|---|---|
transition-property | CSS属性值 | 定义哪些CSS属性会应用transition |
transition-duration | 时间 | 定义transition的持续时间 |
transition-timing-function | 时间函数:ease|linear|ease-in|step-start等 | 用来控制过渡效果速度函数的 |
transition-delay | 时间 | 延迟 |
transition
属性的合并用法是按照上述的属性顺序进行定义的。缺失的将使用默认值。
.box {
transition: all .5s ease;
}
Animation & Keyframes
要使用CSS动画,需要先定义一个关键帧(keyframes)。关键帧指明在特定时间点元素所展示出来的样式状态。触发的时间点用百分比表示,其中from
关键字相当于0%
,to
关键字相当于100%
。在定义关键帧中元素样式时候,!important
关键字会被忽略。
@keyframes animationName {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeFromTo {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation
的属性有
属性 | 值 | 作用 |
---|---|---|
animation-name | 定义的keyframes 名字 |
用来获取定义的动画效果 |
animation-duration | 时间长度 | 用来指定动画从开始到结束所用时间 |
animation-delay | 时间长度 | 延迟时间 |
animation-iteration-count | 数字(可以使用小数) 或 infinite(无限) | 动画循环播放次数 |
animation-timing-function | linear等 | 定义动画播放函数,用以控制播放速度曲线 |
animation-fill-mode | none,forwards,backwards,both | 指定当动画播放结束的时候应用到元素上的样式 |
animation-direction | normal,reverse,alternate,alternate-reverse | 控制动画是否反向播放 |
其简写形式为:
animation : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
多个动画
当要对一个元素添加多个动画效果时,需要用,
分隔开来,如:
.element {
animation: fadeIn 4s 1s infinite linear alternate,
rotate 4s 1s infinite linear alternate;
}
@keyframes fadeIn {
to {
opacity: 0;
}
}
@keyframes rotate {
to {
transform: rotate(180deg);
}
}
网友评论