动画渐变

CSS动画 animation

什么是 CSS 动画

动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：

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

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

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

animation 缩写

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

animation: example 5s linear 2s infinite alternate;

CSS过渡 transition

CSS过渡-示例open in new window

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

<style type="text/css">
  div {
    position: absolute;
    left: 200px;
    top: 100px;
    height: 200px;
    width: 200px;
    background: #3994c9;
    -o-transition: width, height, left, top, 2s ease;
    -moz-transition: width, height, left, top, 2s ease;
    -webkit-transition: width, height, left, top, 2s ease;
    transition: width, height, left, top, 2s ease;
  }
  div:hover {
    width: 400px;
    height: 300px;
    left: 300px;
    top: 400px;
  }
</style>
<body>
  <div></div>
</body>

CSS变形 transform

CSS转换-示例open in new window

Property	描述
transform	适用于 2D 或 3D 转换的元素
transform-origin	允许您更改转化元素位置

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

<style type="text/css">
  section {
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
  }
  section:nth-child(2) {
    transform: translate(50px, 50px);
  }
  section:nth-child(3) {
    left: 200px;
    top: 50px;
  }
  section:nth-child(4) {
    left: 200px;
    top: 50px;
    transform: rotate(45deg);
  }
  section:nth-child(5) {
    left: 400px;
    top: 50px;
  }
  section:nth-child(6) {
    left: 400px;
    top: 50px;
    transform: scale(1.5, 1.2);
  }
  section:nth-child(7) {
    left: 600px;
    top: 50px;
  }
  section:nth-child(8) {
    left: 600px;
    top: 50px;
    transform: skew(30deg, 10deg);
  }
  section:nth-child(9) {
    left: 800px;
    top: 50px;
  }
  section:nth-child(10) {
    left: 800px;
    top: 50px;
    transform: matrix(0.707, 0.707, -0.707, 0.707, 50, 50);
  }
</style>
<body>
  <section></section>
  <section>translate(50px,50px)</section>
  <section></section>
  <section>rotate(45deg)</section>
  <section></section>
  <section>scale(1.5,1.2)</section>
  <section></section>
  <section>skew(30deg,10deg)</section>
  <section></section>
  <section>matrix(0.707,0.707,-0.707,0.707,50,50)</section>
</body>

# 动画渐变

# CSS动画 animation

# CSS过渡 transition

# CSS变形 transform

动画渐变

CSS动画 animation

CSS过渡 transition

CSS变形 transform