CSS3 动画

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: myfirst 5s linear 2s infinite 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 动画执行次数，无限次为 infinite animation-direction 运动方向，默认值为 normal，动画的每次循环都是向前播放；另一个值是 alternate，动画在奇数次正常播放，偶数次反向播放，即轮流反向播放 End of File 行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^

本文章由javascript技术分享原创和收集