css动画样式,动画效果css

5、CSS样式之动画效果

阴影: 通过合理添加阴影可以使平面网页内容显示出立体的效果

1、 box-shadow：盒子阴影

(1) 阴影在x轴方向的偏移, 正右负左

(2) 阴影在y轴方向的偏移, 正下负上

(3) 阴影的模糊度, 数值越大, 阴影越模糊

(4) 阴影的范围, 数值越大, 阴影越大

(5) 阴影颜色

(6) 阴影位置, 默认outset盒子外阴影, inset盒子内阴影

2、 text-shadow：文字阴影

(1) 阴影x轴偏移

(2) 阴影y轴偏移

(3) 阴影模糊度

(4) 阴影颜色

文字阴影不能像盒子阴影一样叠加阴影。

可以通过渐变为标签设置一定梯度变化的背景色

渐变色只能给标签的background-image样式赋值。

1、线性渐变： -webkit-linear-gradient

1) 线性的角度或方向, 默认从上到下渐变

(1) left / right / top / bottom 设置渐变的开始方向

(2) 角度的设置, 单位deg, 0deg在3点钟方向, 正角度逆时针旋转, 负角度顺时针旋转。

2) 渐变的颜色和阶段, 如果不设置阶段, 各个自动平分

2、径向渐变, 以圆心向四周沿着半径方向渐变：-webkit-radial-gradient

(1) 设置圆的类型, 默认椭圆, 可以设置circle

(2) 设置颜色及阶段

倒影：通过-webkit-box-reflect 来为标签设置倒影

(1) 设置倒影方向

above: 倒影出现在标签的上方

below: 倒影出现在标签的下方

left: 倒影出现在标签的左方

right: 倒影出现在标签的右方

(2) 设置倒影距离

(3) 设置蒙版图片, 可以设置渐变

倒影目前只在 Chrome 和 Safari 浏览器生效

过渡动画效果: 将标签的样式变化以连续平滑的方式显示, 类似于动画。

1）transition-property: 设置过渡需要表现表现的样式属性,通常使用 all 来设置所有样式变化都用过渡显示。

2）transition-duration: 设置过渡的持续时间。

3）transition-delay: 设置过渡效果的延迟时间。

4）transition-timing-function: 设置过渡的速度曲线。

过渡效果，可以简写，用空格可空开过渡样式的各个值，不分先后，当存在两个时间时，第一个为过渡持续时间，第二个为过渡延迟时间。

可以设置的值:

（1）ease: 先快后慢

（2）ease-in: 加速

（3）ease-out: 减速

（4）ease-in-out: 先加速后减速

（5）linear: 匀速

1、2d变换：

通过 transform 来为标签设置变换

1） 平移变换 translate

translateX():设置标签沿着x轴移动的距离

translateY():设置标签沿着y轴移动的距离

translate():设置标签沿着xy轴的移动距离，第一个值表示x轴平移，第二个值表示y轴平移

x轴水平向右为正方向，y轴向下为正方向

平移会保留标签原本位置，相对自身原本位置平移

2） 旋转变换 rotate

默认旋转点在标签的正中心，正角度使标签沿着顺时针旋转，负角度使标签沿着逆时针旋转。

0deg方向是12点方向。

旋转点又是标签变换的坐标系原点

3）缩放变换 scale

scaleX()、scaleY()、scale()

缩放变换，放大缩小的是标签坐标系的比例，例如，放大2倍，坐标系中1px就变成了2px；注意，一旦坐标系比例发生变化，会影响其他变换，例如：平移变换100px在2倍坐标系下，就会平移200px。

transform-origin 设置标签变换参照点位置:

（1）left/right/top/bottom/center来设置特殊位置

（2）通过具体像素精确设置位置

第一个值表示x轴方向对参照点位置的设置

第二个值表示y轴方向对参照点位置的设置

允许变换参照点设置在标签之外

注意，一旦为标签更改变换参照点，那么变换参照点的基准就变成了标签左上角为原点。

2d的变换总结：

（1）默认变换参照点在标签的正中心，x轴为穿过参照点水平轴，向右为正，y轴是穿过参照点竖直轴，向下为正。

（2）平移、旋转、缩放都会改变标签坐标系的状态。

（3）变换都是参照标签初始位置进行变换。

2、3D变换

设置3d变换 ：

设置视距：

（1）和2d变换相似，只是在2d变换平面的基础上，多出了一条，垂直于标签平面并默认向外为正的z轴。

（2）3d变换需要为变换标签的父标签设置变换类型为3d，相当于在该标签下生成了一块3d空间。

（3）3d变换下，只有平移和旋转变换，没有缩放。

（4）3d变换中, 可以通过改变标签变换参照点位置来改变XYZ轴的位置

1、 animation动画，配合@keyframes来为标签设置关键帧动画

animation属性值：

1）animation-name：动画名称，用于为动画绑定关键帧

@keyframes后面的名称

2）animation-duration：动画播放时间

s为单位，时间为0无动画过程

3）animation-delay：动画延迟时间

s为单位，时间为0无延迟

4）animation-timing-function：动画缓动效果

可以设置的值：

（1）ease

（2）ease-in

（3）ease-out

（4）ease-in-out

（5）linear

5）animation-direction：设置动画方向

alternate，当播放次数大于一，返向播放

6）animation-iteration-count：设置动画播放次数

infinite，无限播放

7）animation-fill-mode：设置动画结束位置

默认 backwards，回到初始位置

forwards，停在结束位置

注意： animation同样存在简写，将样式值以空格隔开，不区分先后，两个时间同时出现，第一个为播放时间，第二个为延迟时间。

一些css3样式只在部分浏览器生效, 可以通过添加兼容前缀的形式来对部分低版本浏览器兼容

例如: transition: all 1s linear;

-webkit-transition: all 1s linear;

-moz-transition: all 1s linear;

-o-transition: all 1s linear;

-ms-transition: all 1s linear;

兼容问题：

-webkit- chrome、safari

-moz- firefox

-o- opera

-ms- ie

nimation、transition、transform、gradient等css3样式都应添加前缀进行多类型多版本浏览器兼容。

相关问答

Q1: css动画效果的各种实现方法与区分，使用transition实现一个简单的翻牌效果

感觉自己总是混淆css各种动画效果，所以再这里总结一下

1. transition ，所在元素块样式变动时启动，可用于样式变动时 产生过渡动画效果

| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |

| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |

| transition-timing-function | 规定速度效果的速度曲线。 |

| transition-delay | 定义过渡效果何时开始。 |

2. tranform :用于平移，旋转，缩放，透视

语法

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

animationname 必需。定义动画的名称。

keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）

css-styles 必需。一个或多个合法的 CSS 样式属性。

4.@media :可以根据屏幕大小响应式改变样式

接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果

Q2: CSS3 动画

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；

transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：

none 表示不做变换； transform-function 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：

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

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

它有三种用法： scale(number[, number]) 、 scaleX(number) 和 scaleY(number) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

移动也分三种情况： translate(translation-value[, translation-value]) 、 translateX(translation-value) 和 translateY(translation-value) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等;

扭曲同样也有三种情况， skew(angle[, angle]) 、 skewX(angle) 和 skewY(angle) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；

它是来设置过渡效果的速率，它有6种形式的速率：

它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：

animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

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

它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：

和 transition-timing-function 类似：

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

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

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

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

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

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。