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>
CSS3學習系列之動畫