css3动画功能之Transitions功能的介绍

零下一度

发布时间：2017-05-02 14:29:40

1763人浏览过

来源于php中文网

原创

在css3中，如果使用动画功能，可以使页面上的文字或画像具有动画效果，可以使背景色从一种颜色平滑过度到另一种颜色。

css3中的动画功能分为transition功能与animations功能，这两种功能都可以通过改变css中的属性值来产生动画效果。
目前为止，transitions功能支持从一个属性值平滑过度到另一个属性值，animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

Transitions功能

浏览器	Firefox 4+	Opera 10	Safari 3.1+	Chrome 8+
各浏览器写法	-moz-transition	-o-transition	-webkit-transition	-webkit-transition

transition:property duration timing-function;property表示对哪个属性进行平滑过渡；
duration表示在多长时间内完成属性的平滑过渡；
timing-function表示通过什么方法来进行平滑过渡；

html:

示例文字

平滑过渡一个属性值的css：

在线演示（鼠标经过，背景颜色改变）

平滑过渡多个属性值的css：

在线演示（鼠标经过，背景颜色、字体颜色、宽度改变）

立即学习“前端免费学习笔记（深入）”；

在线演示（综合使用transitions动画功能）：

鼠标经过图片，先向右移动30px，然后旋转180度；

html：

@@##@@

css：

  img {      
  position: absolute;      top: 70px;      left: 0;      -webkit-transform: rotate(0deg);      -webkit-transitions: left 1s linear, -webkit-transform 1s linear;      -moz-transform: rotate(0deg);      -moz-transitions: left 1s linear, -moz-transform 1s linear;      -o-transform: rotate(0deg);      -o-transitions: left 1s linear, -o-transform 1s linear;    }
    p:hover img{      position: absolute;      left: 30px;      -webkit-transform: rotate(180deg);      -moz-transform: rotate(180deg);      -o-transform: rotate(180deg);    }

解析：
使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性之间实现平滑过渡，不能实现更为复杂的动画效果；
但使用Animation功能实现动画效果，它允许通过关键帧的指定来在页面上产生复杂的动画效果。

在css3中，如果使用动画功能，可以使页面上的文字或画像具有动画效果，可以使背景色从一种颜色平滑过度到另一种颜色。
css3中的动画功能分为transition功能与animations功能，这两种功能都可以通过改变css中的属性值来产生动画效果。
目前为止，transitions功能支持从一个属性值平滑过度到另一个属性值，animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

jQuery单页全屏垂直滚动特效代码

非常实用的jQuery单页全屏垂直滚动特效代码，如今非常流行的特效代码，常用于产品功能介绍或者项目简介，此款jQuery插件滚动还是比较流畅，有些插件需要页面滚动到位才能切换页面，此特效还是比较流畅的。插件强大的自定义参数功能，支持手机端触屏以及支持切换的速度，值得学习使用。

下载