在 CSS3 中,transitions 功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过 transitions 属性来使用 transitions 功能。
transitions 属性的使用方法如下所示:
transitions:property durantion timing-function
其中 property 表示对哪个属性进行平滑过渡,duration 表示在多长时间内完成属性值的平滑过渡,timing-function 表示通过什么方法来进行平滑过渡。例子如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Transitions功能的使用示例
- </title>
- <style>
- div{ background-color: #ffff00; -webkit-transition: background-color 1s
- linear; -moz-transition: background-color 1s linear; -o-transition: background-color
- 1s linear; } div:hover{ background-color: #00ffff; }
- </style>
- </head>
- <body>
- <div>
- 示例文字
- </div>
- </body>
- </html>
在 CSS3 中,还有另外一种使用 transitions 功能的方法,就是将 transitions 属性中的三个参数改写成 transition-property 属性、transition-duration 属性、transition-timing-function 属性,这三个属性的含义及属性值的指定方法与 transitions 属性中的三个参数的含义及指定方法完全相同。
可以使用 transitions 功能同时对多个属性值进行平滑过渡,例子如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>使用transitions功能实现多个属性的平滑过渡</title>
- <style>
- div {
- background-color: #ffff00;
- color: #000000;
- width: 300px;
- -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
- -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
- -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
- }
- div:hover {
- background-color: #003366;
- color: #ffffff;
- width: 400px
- }
- </style>
- </head>
- <body>
- <div>示例文字</div>
- </body>
- </html>
Animations 功能与 transitions 功能相同,都是通过改变元素的属性值来实现动画效果的,它们的区别在于:使用 transitions 功能时只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡的方式来实现动画效果,因此不能实现比较复杂的动画效果;例子如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>animations功能的使用示例</title>
- <style>
- div {
- background-color: red;
- }
- @-webkit-keyframes mycolor {
- 0% {
- background-color: red;
- }
- 40% {
- background-color: darkblue;
- }
- 70% {
- background-color: yellow;
- }
- 100% {
- background-color: red;
- }
- }
- div:hover{
- -webkit-animation-name:mycolor;
- -webkit-animations-duration:5s;
- -webkit-animation-timing-function: linear;
- animation-name:mycolor;
- animation-duration: 5s;
- animation-timing-function: linear;
- }
- </style>
- </head>
- <body>
- <div>示例文字</div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>让多个属性同时变化</title>
- <style>
- div{
- position: absolute;
- background-color:yellow;
- top: 100px;
- width: 500px;
- }
- @keyframes mycolor {
- 0%{
- background-color: red;
- transform: rotate(0deg);
- }
- 40%{
- background-color: darkblue;
- transform: rotate(30deg);
- }
- 70%{
- background-color: yellow;
- transform: rotate(-30deg);
- }
- 100%{
- background-color: red;
- transform: rotate(0deg);
- }
- }
- div:hover{
- animation-name:mycolor;
- animation-duration: 5s;
- animation-timing-function: linear;
- }
- </style>
- </head>
- <body>
- <div>示例文字</div>
- </body>
- </html>
可以通过 animation-iteration-count 属性来指定动画的播放次数,也可以通过对该属性指定 infinite 属性值让动画不停地循环播放。
Animations 功能中实现动画的方法:
linear 在动画开始时到结束时以同样的速度进行改变
ease-in 动画开始时速度很慢,然后速度沿曲线值进行加快
ease-out 动画开始时速度很快,然后速度沿曲线值进行放慢
ease 动画开始时速度很慢,然后速度沿曲线值进行加快,然后沿曲线值放慢
ease-in-out 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值放慢
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>实现网页淡入效果的示例</title>
- <style>
- @keyframes fadein {
- 0%{
- opacity:0;
- background-color: white;
- }
- 100%{
- opacity: 1;
- background-color: white;
- }
- }
- body{
- animation-name:fadein;
- animation-duration: 5s;
- animation-timing-function: linear;
- animation-iteration-count: 1;
- }
- </style>
- </head>
- <body>
- <div>示例文字</div>
- </body>
- </html>
来源: http://www.cnblogs.com/hetaojs/p/7120509.html