CSS3 中新增了一些用来实现动画效果的属性，通过这些属性可以实现以前通常需要使用 JavaScript 或者 flash 才能实现的效果，例如，对 HTML 中的标签进行平移、缩放、旋转、倾斜，以及添加过渡效果等，并且可以将这些变化组合成动画效果来进行展示。

目录

一，变换（transform）

二，过渡（transition）

1，指定参与过渡的属性

2，指定过渡持续的时间

3，指定过渡的延迟时间的属性

4，指定过渡的动画类型属性

5，组合使用

三，动画（animation）

1，关键帧

2，动画属性

一，变换（transform）

 在 CSS3 中提供了 transform 和 transform-origin 两个用于实现 2D 变换的属性，其中 transform 属性用于实现平行、缩放，旋转和倾斜等 2D 变换，而 transform-origin 属性则是用于设置中心点的变换。

transform 属性的属性值如下表所示：

• transform 属性支持一个或多个变换函数，也就是说通过 transform 属性可以实现平移、缩放、旋转和倾斜等组合的变换效果。不过，在为其指定多个属性值时不是使用常用的逗号“，”进行分割，而是使用空格进行分隔。

 实例：在 HTML 页面中，当鼠标滑过手机图片时，逐渐向两边展开手机图片，实现步骤如下

（1）新建一个 HTML 文件，然后通过 标签添加四张要实现动画效果的图片，关键代码如下：

  
  

    
旋转
    
  

  
  

    
缩放
    
  

  
  

    
平移
    
  

  
  

    
倾斜
    
  
 
（2）新建一个 CSS3 文件，通过外部样式引入 HTML 文件，通过 transform 中的 rotate 属性值实现第一张图片的旋转效果，关键代码如下：
 
    /* 后代选择器，中间空格隔开 */
.mr-content .mr-block .mr-img1:hover{  /* 当鼠标悬停图片上时 */
  transform: rotate(30deg);          /* 顺时针旋转 30°*/
}
（3）通过 transform 中的 scale 属性值实现第二张图片的缩放效果，关键代码如下：
 .mr-content .mr-block .mr-img2:hover{transform: scaleX(2);           /* 在 X 轴上进行放大两倍 */
    }
（4）通过 transform 中的 translate 属性值实现第三张图片的平移效果，关键代码如下：
 .mr-content .mr-block .mr-img3:hover{transform:translate(60px);      /* 在 X 轴上向右平移 60 像素 */
 }
（5）通过 transform 中的 skew 属性值实现第四张图片的倾斜效果，关键代码如下：
.mr-content .mr-block .mr-img4:hover{transform:skew(3deg,30deg);      /* 在 X 轴和 Y 轴上进行倾斜 */
 }
完成代码编辑后，在浏览器中运行代码，当鼠标选悬停在图片上时，图片就会显示对应的动画效果，运行效果对比如图所示：
     

二，过渡（transition）
CSS3 提供了用于实现过渡效果的 transition 属性，该属性可以控制 HTML 标签的某个属性发生改变时所经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。下面我将逐一介绍 transition 的各种属性。
1，指定参与过渡的属性
CSS3 中指定参与过渡的属性为 transition-property，语法格式如下：
transition-property:all none property1, property2, property3, ...;
● all：默认值。表示所有可以进行过渡的 CSS3 属性。
● none：表示不指定过渡的 CSS3 属性。
● property：表示要进行过渡的 CSS3 属性。可以同时指定多个属性值，用英文格式的 "," 进行分隔 
2，指定过渡持续的时间
CSS3 中指定参与过渡的属性为 transition-duration，语法格式如下：
transition-duration: time1, time2, ...;
 ● time：用于指定过渡持续的时间，默认值为 0。如果存在多个属性值,  用英文格式的 "," 进行分隔
3，指定过渡的延迟时间的属性
CSS3 中指定参与过渡的属性为 transition-delay，语法格式如下：
transition-delay: time1, time2, ...;
 ● time：用于指定延迟过渡的时间，默认值为 0。如果存在多个属性值,  用英文格式的 "," 进行分隔
4，指定过渡的动画类型属性
CSS3 中指定参与过渡的属性为 transition-timing-function，语法格式如下：
 transition-timing-function: timing-function1, timing-function2, ...;
 ● timing-function1, timing-function2, ...：一个或多个速度曲线函数，用于控制过渡的不同阶段。
属性值如下表所示：



属性值
说明


linear
线性过渡，也就是均匀过渡


ease
平滑过渡，过渡的速度会逐渐慢下来


ease-in
由慢到快，也就是逐渐加速


ease-out
由快到慢，也就是逐渐减速


ease-in-out
由慢到快，再到慢，也就是先加速再减速


cubic-bezier(x1,y1,x2,y2)

特定的贝塞尔曲线类型，
由于这种曲线太复杂了，这里不过多描述




5，组合使用
 实际应用中也可以简写，简写的语法格式如下：
selector {    /*selector 是选择器 */
  transition: property duration timing-function delay;
}
transition 属性的简写顺序是可以调整的，但需要注意的是，调整顺序可能会影响过渡效果的一致性和可读性。在实际应用中，建议按照以下顺序来保持一致性：

transition-property
transition-duration
transition-timing-function
transition-delay

这个顺序与各个属性在单独声明时的顺序相同，也符合大多数开发者的阅读习惯。按照这个顺序书写可以确保代码的清晰性和易于理解。

三，动画（animation）
 使用 CSS3 实现动画效果需要两个过程，分别是 定义关键帧  和  引用关键帧。首先介绍关键帧的定义方法。
1，关键帧
在实现 Animation 动画时，需要先定义关键帧，定义关键帧的语法格式如下：
  @keyframes animation-name{ };

animation-name：定义一个动画名称，该动画名称将用来被 animation-name 属性（指定动画名称属性）所使用。
：定义动画在不同时间段的样式规则。该属性值包括以下两种形式：


第一种方式为使用关键字 from 和 to 定义关键帧的位置，实现一个状态过渡到另一个状态，语法格式如下：
from{
    属性 1：属性值 1；属性 2：属性值 2；...
    属性 n：属性值 n；}

to{
    属性 1：属性值 1；属性 2：属性值 2；...
    属性 n：属性值 n；}
例如定义一个名称为 opacityAnim 的关键帧，用于实现从完全透明到完全不透明的动画效果，可以使用以下的代码:
@keyframes opacityAnim{from{opacity:0;}
    to{opacity:1;}
}

第二种方式为使用百分比定义关键帧的位置，通过实现百分比来指定过渡的各个状态。语法格式如下:
百分比 1{
    属性 1：属性值 1；属性 2：属性值 2；...
    属性 n：属性值 n；}

百分比 n{
    属性 1：属性值 1；属性 2：属性值 2；...
    属性 n：属性值 n；}
例如定义一个名称为 complexAnim 的关键帧，用于实现将对象从完全透明到完全不透明，再逐渐收缩到 80%，最后再从完全不透明过渡到完全透明的动画效果，可以使用如下代码：
@-webkit-keyframes complexAnim{0%{opacity:0;}
    20%{opacity:1;}
    50%{-webkit-transform：scale(0.8);}
    80%{opacity:1;}
    100%{opacity:0;}
}



在指定百分比时，一定要加“%”，如 0%、50% 和 100% 等。

2，动画属性
要实现 Animation 动画，在定义了关键帧以后，还需要使用动画相关属性来执行关键帧的变化。CSS3 为 Animation 动画提供如下表所示的九个属性：



属性
属性值
说明


animation
复合属性。以下属性的值的综合
指定对象所应用的动画特效


animatio-name
name
指定对象所应用的动画名称


animation-duration
time+ 单位 s (秒)
指定对象动画的持续时间


animation-timing-function
其属性值与 transition-timing-function 属性值相关
指定对象动画的过渡类型


animation-delay
time+ 单位 s (秒)
指定对象动画的延迟的时间


animation-iteration-count
number 或 infinite(无限循环)
指定对象动画的循环次数


animation-direction

normal(默认值，表示正常方向) 或
altermate(表示正常与反向交替)

指定对象动画在循环中是否反向运动


animation-play-state

running (默认值，表示运动)
或 paused (表示暂停)

指定对象动画的状态


animation-fill-mode

none：表示不设置动画之外的状态，默认值；
forwards：表示设置对象状态为动画结束时的状态；
backwards：表示设置对象状态为动画开始时的状态；
both：表示设置对象状态为动画结束或开始的状态

指定对象动画的时间之外的状态



设置动画属性时，可以加更多个动画属性值写在一行里，例如下面的代码：
.mr-in{
    animation-name: lun;
    animation-duration: 10s；animation-timing-function: linear；animation-direction: normal；animation-iteration-count: infinite；}
上面的代码中设置的动画属性中的动画名称、动画持续时间、动画速度曲线、动画运动方向以及动画播放次数，如果将这些属性写在一起，代码如下：
.mr-In{animation: lun 10s linear infinite normal；}
实例：通过 Animation 属性可以实现购物商城中商品详情里滚动播出广告，具体实现步骤如下：
（1）新建一个 HTML 文件，通过
标签添加广告文字，关键代码如下：


  

    
    

      
小米年度盛典
      
惊喜连连
      
新品手机震撼上市
      
折扣多多
      
不容错过
      
惊喜购机有好礼
      
满减优惠
      
神秘幸运奖
      
雷军等你带回家
    
  

（2）新建一个 CSS3 文件，通过外部样式引入 HTML 文件，通过 Animation 属性实现滚动播出广告，关键代码如下：
  .mr-p{
    height: 30px;             /* 设置高度 */
    margin-top: 0;            /* 设置外边距 */
    text-align: right;        /* 设置文本出现在浏览器右侧 */
    padding-right: 400px;     /* 设置右侧边距 */
    color: #333;              /* 设置字体颜色 */
    font-size: 24px;          /* 设置字体大小 */
    animation: lun 10s linear infinite; /* 设置动画 */
  }

  @-webkit-keyframes lun{   /* 通过百分比指定过渡各个状态时间 */
    0%{margin-top: 0;}
    10%{margin-top: -30px;}
    20%{margin-top: -60px;}
    30%{margin-top: -90px;}
    40%{margin-top: -120px;}
    50%{margin-top: -150px;}
    60%{margin-top: -180px;}
    70%{margin-top: -210px;}
    80%{margin-top: -240px;}
    90%{margin-top: -270px;}
    100%{margin-top: -310px;}
  }
img{
  height: 780px;
  width: 1450px;
}

（3）运行之后可以看到这段文字浮动到页面中间部分会停止浮动，如果想要一直浮动到浏览器顶部，可以这样修改 CSS 部分代码：
@keyframes lun {   /* 通过百分比指定过渡各个状态时间 */
  0% {transform: translateY(0); }
  100% {transform: translateY(-3000px); } /* 假设您的页面高度是 3000px */
}
运行之后，这些文字会不断向上浮动，实现一个动画效果：
● 实现 CSS3 中的动画效果时，需要在页面中添加块级标签
，并且设置其溢出内容显示为隐藏(overflow:hidden;)，然后在其内部嵌套一个块级标签，用来添加动画内容（例如上面实例中的滚动文字）。