CSS3学习系列之动画
- Transitions功能使用方法
在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功能同时对多个属性值进行平滑过渡多个属性值
可以使用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功能的使用方法
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>
