Transitions功能使用方法
在css3中，transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內(nèi)平滑過渡到另一個屬性值來實現(xiàn)動畫功能，可通過transitions屬性來使用transitions功能。
transitions屬性的使用方法如下所示：
transitions：property durantion timing-function
其中property表示對哪個屬性進行平滑過渡，duration表示在多長時間內(nèi)完成屬性值的平滑過渡，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屬性中的三個參數(shù)改寫成transition-property屬性、transition-duration屬性、transition-timing-function屬性，這三個屬性的含義及屬性值的指定方法與transitions屬性中的三個參數(shù)的含義及指定方法完全相同。
使用transitions功能同時對多個屬性值進行平滑過渡多個屬性值
可以使用transitions功能同時對多個屬性值進行平滑過渡，例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>使用transitions功能實現(xiàn)多個屬性的平滑過渡</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功能相同，都是通過改變元素的屬性值來實現(xiàn)動畫效果的，它們的區(qū)別在于：使用transitions功能時只能通過指定屬性的開始值與結(jié)束值，然后在這兩個屬性值之間進行平滑過渡的方式來實現(xiàn)動畫效果，因此不能實現(xiàn)比較復(fù)雜的動畫效果；例子如下：
<!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>
實現(xiàn)多個屬性值同時改變的動畫
<!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屬性來指定動畫的播放次數(shù)，也可以通過對該屬性指定infinite屬性值讓動畫不停地循環(huán)播放。
實現(xiàn)動畫的方法
Animations功能中實現(xiàn)動畫的方法：
linear 在動畫開始時到結(jié)束時以同樣的速度進行改變
ease-in 動畫開始時速度很慢，然后速度沿曲線值進行加快
ease-out 動畫開始時速度很快，然后速度沿曲線值進行放慢
ease 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后沿曲線值放慢
ease-in-out 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后再沿曲線值放慢
實現(xiàn)網(wǎng)頁的淡入效果
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>實現(xiàn)網(wǎng)頁淡入效果的示例</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
延伸閱讀
- 學(xué)習(xí)、實踐。再學(xué)習(xí)，再實踐 2023-04-15
- 從0到0.5，堅持學(xué)習(xí) 2022-09-08
- 來萬碼學(xué)習(xí)，是我最正確的選擇 2022-09-07
- 學(xué)習(xí)與實踐 2022-06-24
- 學(xué)習(xí)——工作——再學(xué)習(xí) 2021-06-01
- 不斷學(xué)習(xí)，才能不斷進步 2021-05-19
- 此生難忘的一次學(xué)習(xí) 2020-06-11
- 我的學(xué)習(xí)之路 2019-11-24
- 互相學(xué)習(xí)，共同進步——劉*洵 2019-11-06
- 學(xué)習(xí)過程中，要養(yǎng)成良好的習(xí)慣——穆*杰 2019-07-05
學(xué)習(xí)、實踐。再學(xué)習(xí)，再實踐