css 动画

2024-01-07 16:30:40

1 transform

设置元素的形状改变

1.1 `transform` 设置变换类型

transform: none | transform-function(参数)
none表示不做变换
transform-function表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在()里面，用空格分开
例如：transform ： rotate(30deg) scale(2,3);

1.2 `transform-origin`设置变换基点

所有变形都是基于基点，默认为元素的中心点。
transform-origin: (x, y)
x 和 y 的值可以是百分比、rem 或者是 px 等等，
也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom。

1.3 rotate 旋转

transform: rotate(角度)
表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转

transform: rotate(45deg); //旋转45°，一个圆总共360deg

1.4 scale 缩放

scale(number, [number]) 水平和垂直方向同时缩放
scaleX(水平缩放比例) 水平方向缩放
scaleY(垂直缩放比例) 垂直方向缩放
缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小

transform: scale(2);
transform: scaleX(2);
transform: scaleY(0.5);

1.5 translate 移动

translate(number, [number])水平和垂直同时移动
translateX(水平移动距离)水平方向移动
translateY(垂直移动距离)垂直方向移动
移动单位是 CSS 中的长度单位：px、rem等

transform: translate(50px);
transform: translate(50px, 25px);
transform: translateX(50px);
transform: translateY(25px);

1.6 skew 扭曲

skew(angle, [angle])水平和垂直同时扭曲
skewX(水平扭曲角度)水平方向扭曲
skewY(垂直扭曲角度)垂直方向扭曲
单位是角度（deg）

transform: skew(45deg);
transform: skew(0deg, 45deg);

1.7 matrix 矩阵变换

https://www.tuicool.com/articles/na6jy2

2 transition

设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态
transition: property duration timing-function delay;
四个子属性之间不能用逗号隔开，只能用空格隔开。
因为逗号隔开的代表不同的属性(transition属性支持多值)，而空格隔开的代表不同属性的四个关于过渡的子属性
四个子属性只有transition-duration是必需值且不能为0。
其中，transition-duration和transition-delay都是时间。当两个时间同时出现时，第一个是transition-duration，第二个是transition-delay；当只有一个时间时，它是transition-duration，而transition-delay为默认值0

2.1 transition-property

设置哪些属性的变化会有平滑过渡的效果，主要值：none，all，元素属性名（color，length…）

// 鼠标移动到div上，div向右平移50px
.transform {    
    transition-property:all;
}
.transform:hover {
    transform: translateX(50px);
}

2.2 transition-duration

用来设置转换过程的持续时间，必须带单位s或者ms，默认值为0s；
该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

// 鼠标移动到div上，div2s内向右移动50px
.transform {    
    transition-property:all;
    transition-duration:2s; 
}
.transform:hover {
    transform: translateX(50px);
}

2.3 transition-timing-function

元素过渡属性随时间变化的过渡速度变化效果
ease: 默认开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
cubic-bezier：自定义贝塞尔曲线。

2.4 transition-delay

用来设置元素属性延迟多少时间后开始过渡效果，必须带单位s或者ms，默认值为0s
该属性若为负值，无延迟效果
该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

// 鼠标移动到div上，2s后div开始移动，2s内向右移动50px
.transform {    
    transition-property:all;
    transition-duration:2s; 
    transition-delay: 2s;
}
.transform:hover {
    transform: translateX(50px);
}

2.5 更多问题请看参考文档

3 animation @keyframes

比较类似于 flash 中的逐帧动画

@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}
animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

3.1 animation-name

设置动画的名称，可以同时赋值多个动画名称，用,隔开：

3.2 animation-duration

设置动画的持续时间，单位为s，默认值为0s

3.3 animation-timing-function

和transition-timing-function类似

3.4 animation-delay

设置动画的开始时间，单位是s或者ms，默认值为0s

3.5 animation-iteration-count

设置动画循环的次数，默认为1，infinite为无限次数的循环

3.6 animation-direction

设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放

3.7 animation-play-state

控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值

3.8 animation

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写

参考：https://www.jianshu.com/p/15f2adfbdad0
transition参考
https://www.cnblogs.com/xiaohuochai/p/5347930.html
time-function参考
https://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

码农公寓