笔记迁移
This commit is contained in:
结发受长生
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: CSS动画(1)-transform
|
||||
date: 2018-5-12 18:10:10
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
CSS3当中与动画有关的属性有 :
|
||||
+ transform - 变形
|
||||
+ transition - 转换
|
||||
+ animation - 动画
|
||||
<!-- more -->
|
||||
> **准备知识 :**
|
||||
网页中对于元素所定义的坐标系
|
||||
通常所关注的网页是一个平面
|
||||
所以有X轴和Y轴
|
||||
X轴是水平的 , 向右为正方向
|
||||
Y轴是竖直的 , 向下为正方向
|
||||
但是在元素动画相关的属性当中 , 存在3D变换
|
||||
所以还需要一个Z轴
|
||||
这个Z轴是垂直于平面 , 向外为正方向
|
||||
|
||||
z-index属性值大小影响元素在Z轴方向上的排布与此同理
|
||||
|
||||
|
||||
### transform
|
||||
> 该属性只对block级元素生效
|
||||
|
||||
语法格式
|
||||
<pre>
|
||||
transform: <transform-function> [<transform-function>]* | none
|
||||
</pre>
|
||||
也就是说这个属性对应的值可以是none , 代表不进行任何变形
|
||||
也可以使用一个或多个**变形函数**
|
||||
多个函数之间是以**空格**进行分割
|
||||
函数有以下几类 ( 每一类都有若干个分功能的函数 , 类似于margin与margin-top的关系 )
|
||||
+ translate - 转换
|
||||
+ rotate - 旋转
|
||||
+ scale - 缩放
|
||||
+ skew - 倾斜
|
||||
|
||||
#### rotate - 旋转
|
||||
直接使用同名的函数表示2D旋转
|
||||
参数是旋转的角度
|
||||
```css
|
||||
.rotate_div {
|
||||
transform : rotate(30deg);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋转
|
||||
也可以使用`trun`作为单位 , 表示一周 , 比如0.25turn实际就是90度
|
||||
|
||||
+ rotateX - 绕X轴旋转 ( 视觉效果上会在竖直方向上压缩 )
|
||||
+ rotateY - 绕Y轴旋转 ( 视觉效果上会在水平方向上压缩 )
|
||||
+ rotateZ - 绕Z轴旋转 , 实际上rotate本身执行的就是绕Z轴旋转
|
||||
|
||||
#### translate - 移动
|
||||
同名函数接受2个参数 , 分别表示在X轴和Y轴上的移动距离 , 正数代表向该轴的正方向移动 , 负数代表向负方向移动
|
||||
```css
|
||||
.translate_div {
|
||||
tranform : translate(100px, 20px);
|
||||
}
|
||||
```
|
||||
|
||||
+ translateX - 在X轴方向移动
|
||||
+ translateY - 在Y轴方向移动
|
||||
+ translateZ - 在Z轴方向移动
|
||||
( 父元素需要有perspective属性的设置才能生效 这个属性代表透视点在Z轴上的位置 )
|
||||
|
||||
#### scale - 缩放
|
||||
同名函数接受两个参数 , 分别表示在X轴和Y轴上的缩放比例 , 大于1是放大 , 小于1是缩小
|
||||
```css
|
||||
.scale_div {
|
||||
transform : scale(2, 1.5);
|
||||
}
|
||||
```
|
||||
|
||||
+ scaleX - 在X轴方向缩放
|
||||
+ scaleY - 在Y轴方向缩放
|
||||
+ scaleZ - 在Z轴方向缩放 ( 当然需要其他的效果 , 比如绕X轴旋转 , 使元素在Z轴方向上有一定的纵深 , 才会有效果 )
|
||||
+ scale3d - 包含3个参数 , 分别是在XYZ轴上的缩放比例
|
||||
|
||||
#### skew - 倾斜
|
||||
|
||||
同名函数可以提供1或者2个参数 , 如果只提供1个参数 , 代表在X轴方向的倾斜角度
|
||||
如果提供两个参数 , 分别代表在X轴和Y轴方向的倾斜角度
|
||||
```css
|
||||
.skew_div {
|
||||
transform : skew(30deg, 10deg);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
同样有 skewX 与 skewY , 与上面的几个函数类似 , 不过没有Z轴方向的
|
||||
|
||||
> 旋转与倾斜 , 都与元素的基点有关系 , 默认情况下这个基点位于元素的中心
|
||||
> 可以使用`transform-origin`属性来改变该元素的基点
|
||||
> 这个属性的值可以是1~3个 , 可以使用长度值 百分比 关键字( 如top left等 )
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
title: CSS动画(2)-transition
|
||||
date: 2018-5-12 18:16:24
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
CSS的`transition`允许CSS的属性值在一定的时间区间内平滑地过渡
|
||||
这种效果可以在鼠标点击 获得焦点 或对元素的任何改变中触发
|
||||
并圆滑的以动画效果改变CSS的属性值
|
||||
<!-- more -->
|
||||
**语法**
|
||||
transition本身也是一个复合属性 , 主要包含4个属性值
|
||||
1. 执行变换的属性 `transition-property`
|
||||
2. 变换延续的时间 `transition-duration`
|
||||
3. 在变换时间内 , 变换的速率变化 `transition-timing-function`
|
||||
4. 变换的延迟时间 `transition-delay`
|
||||
|
||||
对于多组值 , 它们之间使用逗号分隔
|
||||
|
||||
#### transition-property
|
||||
用来指定哪个CSS属性在变换的过程中应用动画效果
|
||||
可以取值 `none` , `all` 或者具体的属性名称
|
||||
all代表任何可以实现动画变换的属性 , 在变换时都会应用动画效果 , 它是默认值
|
||||
|
||||
#### transition-duration
|
||||
用于指定元素转换过程的持续时间 , 单位可以是`s`或者`ms`
|
||||
例如 0.5s , 或者也可以写作 .5s
|
||||
默认值为0
|
||||
|
||||
#### transition-timing-function
|
||||
这个属性值的本身是一个**贝塞尔曲线**
|
||||
有几个预定义的值 , 或者也可以自定义一个曲线
|
||||
|
||||
如图所示 , 起点和终点也就是P<sub>0</sub>和P<sub>3</sub>的位置是固定的
|
||||
只需要指定P<sub>1</sub>和P<sub>2</sub>的坐标 , 即可决定该曲线的曲率变化
|
||||
曲线上每个点的切线斜率代表在该时间点的变换速率
|
||||
|
||||
P<sub>1</sub>(x1,y1)
|
||||
P<sub>2</sub>(x2,y2)
|
||||
所以自定义贝塞尔曲线的方式就是 `cubic-bezier(x1,y1,x2,y2)`
|
||||
当然x的值需要在[0,1]的区间内 , 否则无效
|
||||
y的值可以超过1或者小于0 , 比如构造一个来回的缓冲效果
|
||||
|
||||
|
||||
|
||||
预定义的贝塞尔曲线
|
||||
1. **ease**：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
|
||||
2. **linear**：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
|
||||
3. **ease-in**：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
|
||||
4. **ease-out**：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
|
||||
5. **ease-in-out**：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
|
||||
|
||||
#### transition-delay
|
||||
指定一个动画开始的延迟时间 , 默认为0
|
||||
|
||||
> 补充说明 :
|
||||
> 在transition当中 , 这4个单属性值其中的每个都是可以省略的
|
||||
> 但通常不会省略持续时间 , 因为省略之后就看不到动画的效果了
|
||||
|
||||
|
||||
----
|
||||
#### 兼容性
|
||||
为了兼容旧版本的浏览器 , 我们通常需要给transition属性加上前缀
|
||||
```css
|
||||
box {
|
||||
-moz-transition:color 0.5s ease-in;
|
||||
-webkit-transition:color 0.5s ease-in;
|
||||
-o-transition:color 0.5s ease-in;
|
||||
transition : color 0.5s ease-in;
|
||||
}
|
||||
```
|
||||
或者也可以使用**postcss**这种预处理工具 , 来自动添加属性的前缀
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: CSS动画(3)-animation
|
||||
date: 2018-5-12 18:19:07
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
使用上一节提到的transition已经可以实现相对简单的一些动画效果
|
||||
但是对于相对复杂一些的效果 , 尤其是其中需要分为多个阶段的 , 就难以实现
|
||||
CSS3的animation属性 , 就提供了更加强大的动画设计功能
|
||||
<!-- more -->
|
||||
|
||||
#### @keyframes
|
||||
这个词的意思是`关键帧`
|
||||
与flash当中的动画制作一样 , 要设计一个完整的动画 , 需要定义其中的几个关键节点的样式
|
||||
再去自动产生这些节点之间的平滑过渡效果
|
||||
|
||||
CSS当中以动画开始的点为`0%` , 以动画结束的点为`100%`
|
||||
我们可以尝试去定义一组关键帧
|
||||
```css
|
||||
@keyframes ANI { /*指定该组关键帧的名称*/
|
||||
0% {
|
||||
width : 100px;
|
||||
background-color:#629411;
|
||||
}
|
||||
50% {
|
||||
width : 150px;
|
||||
background-color: darkgoldenrod;
|
||||
}
|
||||
100% {
|
||||
width : 250px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
}
|
||||
```
|
||||
0% 也可以写作 `from`
|
||||
100% 也可以写作 `to`
|
||||
定义之后我们就可以在DOM元素上调用这组关键帧 , 用来创建动画了
|
||||
```css
|
||||
.animation_div {
|
||||
/* 就是之前定义的关键帧名称 */
|
||||
animation-name : ANI;
|
||||
/* 动画持续的时间 */
|
||||
animation-duration : 5s;
|
||||
/* 和transition-timing-function一样 */
|
||||
animation-timing-function : ease-in-out;
|
||||
/* 动画延迟时间 */
|
||||
animation-delay: 0.5s;
|
||||
/* 定义循环次数，infinite为无限次 */
|
||||
animation-iteration-count: 3;
|
||||
/* 动画执行的方向 */
|
||||
animation-direction: alternate;
|
||||
/* 当前动画正在播放(running)或者暂停(paused) */
|
||||
animation-play-state : running;
|
||||
}
|
||||
```
|
||||
当然动画效果也可以放在`:hover`等伪类当中 , 以创建响应式的效果
|
||||
前面几项都没什么特别的 , 最后两个属性简单说明一下
|
||||
|
||||
#### animation-direction
|
||||
可以取以下几个值
|
||||
+ **normal**
|
||||
每次都正向运行动画，这是默认属性。
|
||||
+ **alternate**
|
||||
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。
|
||||
反向动画同样计入次数
|
||||
例如次数指定为3 , 那么实际就是正向1次 -> 反向1次 -> 正向1次
|
||||
+ **reverse**
|
||||
每次都反向运行动画
|
||||
+ **alternate-reverse**
|
||||
与alternate的区别是 : 首次是反向动画
|
||||
|
||||
#### animation-play-state
|
||||
控制当前元素上的动画播放与暂停
|
||||
暂停之后会定格在当前播放的进度上 , 类似于播放器的暂停
|
||||
我们可以使用一些伪类 , 或者是JS来控制这个属性 , 从而改变动画的播放状态
|
||||
比如
|
||||
```css
|
||||
.animation_div:hover {
|
||||
animation-play-state : paused;
|
||||
}
|
||||
```
|
||||
这样可以实现指向该元素的时候暂停动画的播放
|
||||
|
||||
> **补充说明**
|
||||
> 1. 由于每个元素上都可以包含多个动画 , 所以上述的每个属性的取值都可以是单值或者多值
|
||||
> 2. 可以使用animation这个复合属性来涵盖上面的这些单属性
|
||||
> 
|
||||
Reference in New Issue
Block a user