CSS3特效之過度transition

transition

語法

1. transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
2. transition-property：all | none | <property>[ ,<property> ]*：設置對象中的參與過渡的屬性,默認值爲all
3. transition-duration：<time>[ ,<time> ]*：設置對象過渡的持續時間，默認值爲0
4. transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )[,重複]*：設置對象中過渡的動畫類型
5. transition-delay：<time>[ ,<time> ]*：設置對象延遲過渡的時間

懸停切換背景

懸停切換背景

1. .transition-1{
2. padding:10px 20px;
3. background-color:#f00;
4. -webkit-transition:background 1s linear;
5. -moz-transition:background 1s linear;
6. transition:background 1s linear;
7. }
8. .transition-1:hover{
9. background-color:#009;
10. color:#fff;
11. }

懸停旋轉

旋轉

1. .transition-2{
2. width:100px;
3. height:100px;
4. line-height:100px;
5. text-align:center;
6. border-radius:50px/50px;
7. background-color:orange;
8. -webkit-transition:all 1s linear;
9. -moz-transition:all 1s linear;
10. transition:all 1s linear;
11. }
12. .transition-2:hover{
13. -webkit-transform:rotate(360deg);
14. -moz-transform:rotate(360deg);
15. transform:rotate(360deg);
16. }

懸停縮放

放大

1. .transition-3{
2. width:100px;
3. height:100px;
4. line-height:100px;
5. text-align:center;
6. background-color:#369;
7. -webkit-transition:all .5s linear;
8. -moz-transition:all .5s linear;
9. transition:all .5s linear;
10. }
11. .transition-3:hover{
12. -webkit-transform:scale(1.2);
13. -moz-transform:scale(1.2);
14. transform:scale(1.2);
15. }

組合過渡效果懸停測試效果

抱貓睡覺的魚

1. .transition-4{
2. width:100px;
3. height:100px;
4. line-height:100px;
5. text-align:center;
6. border-radius:50px/50px;
7. background-color:#963;
8. -webkit-transition:all 1s linear;
9. -moz-transition:all 1s linear;
10. transition:all 1s linear;
11. }
12. .transition-4:hover{
13. background-color:#909;
14. color:#fff;
15. box-shadow:0 0 20px rgba(0,0,0,.7);
16. -webkit-transform:rotate(720deg) scale(2);
17. -moz-transform:rotate(720deg) scale(2);
18. transform:rotate(720deg) scale(2);
19. }