CSS学习记录20 - 技术栈

CSS 3D 转换

通过CSS transform 属性，您可以使用以下3D转换方法：

rotateX()
rotateY()
rotateZ()

rotateX() 方法

rotateX() 方法使元素绕其X轴旋转给定角度：

css 复制代码

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

rotateY() 方法使元素绕其Y轴旋转给定的角度：

css 复制代码

#myDiv {
  transform: rotateY(130deg);
}

rotateZ() 方法

rotateZ() 方法使元素绕其Z轴旋转给定角度：

css 复制代码

#myDiv {
  transform: rotateZ(90deg);
}

transform-style

CSS属性 transform-style 设置元素的子元素是位于3D空间中还是平面中。

值

flat：设置元素的子元素位于该元素的平面中。
preserve-3d: 指示元素的子元素应位于3D空间中。

如果选择平面，元素的子元素将不会有3D的遮挡关系。由于这个属性不会被继承，因此必须为元素的所有非叶子元素设置它。

perspective

CSS属性perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。

提示：perspective 属性只影响3D转换元素。

设置元素被查看位置的视图：

css 复制代码

div
{
perspective: 800;
}

CSS过渡

CSS过渡允许您在给定的时间内平滑地改变属性值。如需创建过渡效果，必须明确两件事：

您要添加效果的CSS属性
效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为0。

下例展示了一个红色<div>元素。<div>元素还为width属性制定了过渡效果，持续时间为2s：

css 复制代码

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的CSS属性（width）值发生变化时，将开始过渡效果。可以通过width属性指定一个鼠标悬停在<div>元素上时的新值:

css 复制代码

div:hover {
  width: 300px;
}

当光标从元素上移开时，它将逐渐变回其原始样式。

改变若干属性值

下例为width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

css 复制代码

div {
  transition: width 2s, height 4s;
}

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认)
linear - 规定从开始到结束具有相同速度地过渡效果
ease-in - 规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

贝塞尔曲线：三次贝塞尔曲线由P0、P1、P2和P3 四个点进行定义。P0和P3是曲线的起点和终点，在CSS中，这两个点是固定的。P0为（0，0），代表初始时间和初始状态，P3为（1，1），代表最终时间和最终状态。

其余的中间点P1 (x1,y1)、P2(x2,y2)是可以动态改变的两个点，对应cubic-bezier (x1,y1,x2,y2) 中的四个参数，通过改变P1、P2两点的坐标值来动态生成贝塞尔曲线表示动画中的速度和变化。

css 复制代码

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有1秒的延迟：

css 复制代码

div {
  transition-delay: 1s;
}

过渡 + 转换

下例为转换添加过渡效果：

css 复制代码

div {
  transition: width 2s, height 2s, transform 2s;
}

css 复制代码

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

更多过渡实例

您可以指定CSS过渡属性，如下所示：

css 复制代码

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

或使用简写的transition 属性：

css 复制代码

div {
  transition: width 2s linear 1s;
}

CSS过渡属性

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

CSS动画

CSS 可实现HTML元素的动画效果，而不使用JavaScript 或 Flash！

动画使元素逐渐从一种样式变为另一种样式。如需使用CSS动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在@keyframes 规则中指定了CSS样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。

下例将"example" 动画绑定到<div>元素。动画将持续4秒钟，同时将<div>元素的背景颜色从"red"逐渐改为"yellow"：

css 复制代码

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值0s（0秒）。

通过使用关键字"from" 和 "to" （代表 0%（开始）和100%（完成）），设置了样式何时改变。也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

css 复制代码

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

下面的例子将在动画完成25%，完成50%以及动画完成100%时更改背景颜色和<div>元素的位置：

css 复制代码

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

延迟动画

animation-delay 属性规定动画开始的延迟时间。下例在开始动画前有2秒的延迟：

css 复制代码

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放N秒。

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。下例在停止前把动画运行3次：

css 复制代码

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

使用infinite将使动画永远持续下去。

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

css 复制代码

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

指定动画的速度曲线

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

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

css 复制代码

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

指定动画的填充模式

CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖animation-direction 和 animation-iteration-count)。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下例让<div>元素在动画结束时保留来自最后一个关键帧的样式值：

css 复制代码

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

动画简写属性

下例使用六种动画属性：

css 复制代码

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用简写的animation 属性也可以实现与上例相同的动画效果：

css 复制代码

div {
  animation: example 5s linear 2s infinite alternate;
}

CSS动画属性

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

animation-play-state

animation-play-state CSS属性设置动画是运行还是暂停。恢复的动画将从暂停时停止的位置开始播放，而不是从动画序列的开头重新开始播放。

值

**running:**当前动画正在运行。

**paused：**当前动画已被停止。