CSS3 动画

2020-06-04 本文已影响0人 Nian糕

Unsplash

1 渐变

渐变指在两个或多个指定的颜色之间显示平稳的过渡，渐变一般分为线性渐变和径向渐变，呈一条直线渐变的称作线性渐变，而从圆心到四周扩散的过程成为径向渐变

从左到右的线性渐变，起点是完全透明，慢慢过渡到完全不透明的红色

background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))

线性渐变

background: radial-gradient(red, orange, yellow);

径向渐变

2 过渡

从一种效果过渡到另一种效果，需要指定添加效果的 CSS 属性及过渡所需要的时间

transition: property duration timing-function delay;

property 必须，设置过渡效果的 CSS 属性的名称
duration 必须，完成过渡效果需要多少秒或毫秒
timing-function 速度效果的速度曲线，取值为 linear 匀速运动，ease 逐渐变慢，ease-in 先慢后快，ease-out 先快后慢，ease-in-out 先慢后快再慢
delay 定义过渡效果何时开始

过渡

3 2D 变形

2D 变形中主要包含四个变换函数，分别是 translate() 位移函数，scale() 缩放函数，rotate() 旋转函数，skew() 倾斜函数

translate() 位移函数，从一个地方位移到另一个地方，和数学中的坐标系相比，Y 轴正方向在下面，X 轴正方向仍是右边

transform: translate(100px); 向右平移 100px
transform: translate(-100px, -100px); 向左平移 100px，向上平移 100px
transform: translateX(100px); 向右平移 100px
transform: translateY(-100px); 向上平移 100px

scale() 缩放函数，让元素根据中心原点对对象进行缩放，默认的值 1。小于 1 则元素缩小，反之放大

scale(num) 横坐标与纵坐标同时缩放 num 倍
scale(num1, num2) 横坐标缩放 num1 倍，纵坐标缩放 num2 倍
scaleX(num1) 横坐标缩放 num1 倍
scaleY(num2) 纵坐标缩放 num2 倍

rotate() 旋转函数，接受一个角度值，用来指定旋转的幅度，如果这个值为正值，元素相对原点中心顺时针旋转，若为负值，则逆时针旋转，可通过 transform-origin: center center; 设置选择基点，第一个值表示左右，可选值为 left, center, right，第二个值表示上下，可选值为 top, center, bottom

transform: rotate(50deg); 顺时针旋转 50 度
transform: rotate(-50deg); 逆时针旋转 50 d度

skew() 倾斜函数，可以将一个对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜，这与rotate()函数的旋转不不同，rotate() 函数只是在一个水平面上进行旋转，而不会改变元素的形状，skew() 函数不会旋转，而是倾斜，因此会改变元素的形状

skew(x) / skew(x, y) / skewX(x) / skewY(y)
x：用来指定元素水平方向（X 轴方向）倾斜的角度
y：用来指定元素垂直方向（Y 轴方向）倾斜的角度

4 3D 变形

3D 变换主要包括以下几种功能函数：
3D 位移函数：主要包括 translateX(), translateY(), translateZ() 和 translate3d()
3D 旋转函数：主要包括 rotateX(), rotateY(), rotateZ() 和 rotate3d()
3D 缩放函数：主要包括 scaleX(), scaleY(), scaleZ() 和 scale3d()

在进行 3D 变化元素的外层元素设置 transformstyle: preserve-3d，能够确保该元素的所有子元素都处在 3D 空间中

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;

5 关键帧和动画

CSS3 动画的创建有两步：① 定义 CSS3 关键帧 keyframes；② animation 调用 keyframes，并设置动画属性（将动画绑定到需要做动画的标签中）

我们在使用 transition 制作一个简单的 transition 效果时，该效果包括了初始属性和最终属性，开始执行动作时间和延续动作时间，以及动作的变换速率，如果我们要控制的更细一些，如第一个时间段执行什么动作，第二个时间段执行什么动作，即 flash 中的，第一帧要执行什么动作，第二帧要执行什么动作，这样我们用 transition 就很难实现了，所以我们需要用 @keyframes 属性来实现这样的效果

@keyframes animationname {
  0% {属性名：属性值；属性名：属性值；}
  50% {属性名：属性值；属性名：属性值；}
  100% {属性名：属性值；属性名：属性值；}
}

可以用 from 代替 0%，表示初始状态，用 to 代替 100%，表示结束状态

通过关键帧 keyframes 我们将一系列的属性变化带有了动画的即视感，还要通过 animation 来定义动画的持续时间，动画的执行次数等一系列属性

animation: myﬁrst 5s linear 2s inﬁnite alternate;

animation: animation-direction;

animation-name 动画名称，此处的名称就是刚才我们定义关键帧时取的名字

animation-duration 动画执行时间，单位为秒或毫秒

animation-timing-function 动画变换速率，和 transition-timing-function 一样，具有 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier 变换方式

animation-delay 延迟，规定这个动画可以在延迟指定时间后再执行，单位为秒或毫秒

animation-iteration-count 动画执行次数，无限次为 inﬁnite

animation-direction 运动方向，默认值为 normal，动画的每次循环都是向前播放；另一个值是 alternate，动画在奇数次正常播放，偶数次反向播放，即轮流反向播放

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^