关于前端:CSS3动画

3次阅读

共计 2723 个字符，预计需要花费 7 分钟才能阅读完成。

transition-property : 规定设置过渡成果的 CSS 属性的名称。
transition-property:width ,height;
all 示意所有的属性，默认值

transition-duration : 规定实现过渡成果须要多少秒或毫秒。
transition-duration
须要加工夫单位是 s 秒 ms 毫秒 1s ===1000ms

transition-delay :1s; 定义过渡成果何时开始。
transition-delay:2s; 延时的成果
transition-delay:-2s; 延时的成果

transition-timing-function : 规定速度成果的速度曲线。
linear—————– 匀速
ease（默认值）—————– 逐步慢下来
ease-in—————– 减速
ease-out—————– 加速
ease-in-out—————– 先减速后加速
cubic-bezier—————-（http://cubic-bezier.com）

复合写法：
transition:all 2s linear
transition:2s linear all
transition:2s all linear
留神: 当总工夫与延迟时间同时存在的时候，就有程序了，第一个是总工夫，第二个是延迟时间。
transition:2s 3s linear all

translate : 位移
transform:translate(x,y);
transform:translateX(100PX);
transform:translateY(100PX);
transform:translateZ(100PX);

scale: 缩放
transform:scale(num);
num 是倍数，失常为 1.
transform:scale(num1，num2);
两个值，别离代表 w h
transform:scaleX(num); 只针对宽
transform:scaleY(num); 只针对高
transform:scaleZ(num);

rotate : 旋转
transform: rotate(num) num 是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
示意一个角：角度 deg 或弧度 rad
注 : rotate()跟 rotateZ()是等价关系。
rotateX(3D)
rotateY(3D)
rotateZ(2D)

skew : 斜切
transform:skew(num1,num2):num1 和 num2 都是角度，针对的是 x 和 y
transform : skewX()
transform : skewY()
注: skew 没有 3d 写法。
注：设置多个值时候的程序；先执行前面的，在执行后面的
位移会受到前面要执行的缩放、旋转和斜切的影响。
注：所有的变形不会影响其余元素，相似于绝对定位。
注: 变形操作对 inline(内联元素)不起作用的。

tranform-origin 基点地位
次要是针对旋转和缩放，默认都是中心点为基点。
设置 transform-origin 的基点地位。

原理：逐帧动画。会把整个静止过程，划分为 100 份。

animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的反复次数，默认值就是 1，infinite 有限次数
animation-timing-function : 动画的静止模式
linear—————– 匀速
ease（默认值）—————– 逐步慢下来
ease-in—————– 减速
ease-out—————– 加速
ease-in-out—————– 先减速后加速
cubic-bezier—————-（http://cubic-bezier.com）

animation-fill-mode : 规定动画播放之前或之后，其动画成果是否可见。
none (默认值) : 在静止完结之后回到初始地位，在提早的状况下，让 0% 在提早后失效
backwards : 在提早的状况下，让 0% 在提早前失效
forwards : 在静止完结的之后，停到完结地位
both : backwards 和 forwards 同时失效

animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从 100%~0%
normal (默认值) : 永远都是正向 , 从 0%~100%

@keyframes 动画的名字 {
from{}/* 终点地位 */ 等价于 0%
to{}/* 起点地位 */ 等价于 100%
}
注：默认状况下，元素静止结束后，会停到起始地位。

一款弱小的预设 css3 动画库。
官网地址：https://daneden.github.io/ani…
根本应用：
animated : 基类(根底的款式，每个动画成果都须要加)
infinite : 动画的有限次数

background-image:linear-gradient(to top, red，blue);
background-image:linear-gradient(num deg, red，blue);
background-image:linear-gradient(red 25% ,blue 75%);

linear-gradient : 线性突变
to top: 示意去哪儿方向
num deg: 角度以底下中点为终点 bottom 地位，顺时针转。
red 25% ,blue 75% 示意从 25% 到 75% 突变，0~25% 与 75~100% 没有变动。
radial-gradient : 径向突变

background : linear-gradient(red 25%, blue 25% ,blue 50%,green 50%,green 75%,orange 75%,orange 100%);
如下图，设置的四个色的色彩

text-shadow
x
y
blur
color
多暗影
注：默认状况下，暗影的色彩跟文字的色彩雷同。

box-shadow
x
y
blur : 含糊值
spread : 范畴
color
inset : 内暗影 outset(默认值：外暗影 , 写上 outset 不会失效，不写就是外暗影)
多暗影

注：默认盒子的暗影就是彩色。

正文完