八、CSS3中的动画功能

标签：span   表示   功能实现   TE   允许   font   代码   两种   之间   

CSS3中的动画功能分为Transitions功能和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果，下面我们就来介绍下这两种功能。

1、Transitions功能

1.1 Transitions功能的使用方法

CSS3中，Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能，使用方法如下：

transition：属性名 过渡时间间隔 过渡方法 延迟时间，第一个属性值表示对哪个属性进行平滑过渡，第二个属性表示在多久时间内完成属性值的平滑过渡，第三个属性值表示通过什么方法进行过渡，第四个属性值表示变换特效延迟多久后开始执行。同时平滑过渡多个属性值时用逗号隔开。

示例代码如下，注意transition放在不同元素内的区别：

1??

transform1{
    transform: translateZ(50px);
    background:  red;
    margin-top:  50px;
    width: 200px;
    transition: width 2s linear 1s;
}
.transform1:hover{
    width: 300px;
}

2??

transform1{
    transform: translateZ(50px);
    background:  red;
    margin-top:  50px;
    width: 200px;
}
.transform1:hover{
    width: 300px;
        transition: width 2s linear 1s;
}

1.2 使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果。在CSS3中，除了使用Transitions功能外，还可以使用Animations功能来实现动画效果，它允许使用关键帧的指定来在页面上产生更复杂的动画效果。

2、Animations功能

2.1 Animations功能的使用方法

　　使用Animations功能时，使用以下方法来创建关键帧的集合：@keyframes 关键帧集合名{ 创建关键帧的代码}

　　创建关键帧的代码：40%{ 本关键帧中的样式代码}

这里的40%表示该帧位于整个动画过程中的40%处，开始帧为0%，结束帧为100%。

可以在一行中定义animation动画：animation：keyframe的名称  动画执行时间间隔  动画实现方法  动画延迟时间  动画执行次数（infinite无限次） 动画执行的方向

2.2 实现多个属性值同时改变的动画

2.3 实现动画的方法

（1）linear：在动画开始时与结束时以同样的速度进行改变

（2）ease-in：动画开始时速度很慢，然后速度延曲线值进行加快

（3）ease-out：动画开始时速度很快，然后速度延曲线值进行放慢

（4）ease：动画开始时速度很慢，然后速度延曲线值进行加快，然后速度延曲线值进行放慢

（5）ease-in-out：动画开始时速度很慢，然后速度延曲线值进行加快，然后速度延曲线值进行放慢

2.4 实现网页的淡入效果

在开始帧与结束帧中改变页面的opacity属性的属性值。

八、CSS3中的动画功能

标签：span   表示   功能实现   TE   允许   font   代码   两种   之间   

原文地址：https://www.cnblogs.com/LLMjiayou7/p/9192757.html