CSS3中的過渡，轉換和動畫結合起來使用，視覺效果會更好，所以我把這三塊的內容放在一起。
●animation(動畫)
@keyframes規則
@keyframes myfirst {
from {
/*樣式*/
}
to {
/*樣式*/
}
}
@-webkit-keyframes myfirst {
from {
/*樣式*/
}
to {
/*樣式*/
}
}
屬性
animation-name：規定@keyframes的名稱
animation-duration：規定動畫完成一個週期所花的時間
animation-timing-function：規定動畫的速度曲線，默認值是“ease”
linear: 動畫速度不變
ease：動畫以低速開始，加快，在結束前變慢
ease-in： 動畫以低速開始
ease-out：動畫以低速結束
ease-in-out：動畫以低速開始和結束
●Transition(過渡)
語法
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
transition: property duration timing-function delay;
屬性
| 屬性 | 描述 | 舉例 |
|---|---|---|
| property | 要進行過渡的元素的屬性 | none、all、width |
| duration | 要進行的時間（秒或者毫秒 | 1s、100ms |
| timing-function | 過渡的曲線 | linear(勻速)、ease(慢速開始，加速然後慢速結束)、ease-in(慢速開始)、ease-out(慢速結束) ease-in-out(慢速開始和結束) |
| delay | 延遲的時間 | 1s、100ms |
舉例
div {
width: 300px;
height: 100px;
background-color: blue;
}
div:hover {
animation: div infinite 1s;
}
@keyframes div {
0% {background-color: blue;}
100% {background-color: blueviolet;}
}
/*以上爲css部分*/
<div></div> /*html部分*/
●Transform(過渡)
語法
transform: none|transform-functions1 transform-functions2 transform-functions3...;
transform-origin: x-axis y-axis z-axis;
transform
| 值 | 描述 |
|---|---|
| translate(x,y) | 從當前位置移動到left，top |
| translate3d(x,y,z) | 在x，y，z軸移動的像素 |
| translateX(x) | 從當前位置移動到left |
| translateY(y) | 從當前位置移動到right |
| translateZ(z) | 移動到z軸的像素 |
| scale(x,y) | 增加（減少）寬度和高度 |
| scale3d(x,y,z) | 增加（減少）寬度，高度和z軸的值 |
| scaleX(x) | 增加（減少）寬度 |
| scaleY(y) | 增加（減少）高度 |
| scaleZ(z) | 增加（減少）z軸上的值 |
| rotate(angle) | 定義 2D 旋轉 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes kefu {
from {
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Safari */
transform: scale(1,1); /* 標準語法 */
}
60% {
-ms-transform:scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Safari */
transform: scale(1.2,1.2); /* 標準語法 */
}
to {
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Safari */
transform: scale(1,1); /* 標準語法 */
}
}
#kefu {
position: fixed;
right: 40px;
bottom: 50px;
width: 150px;
height: 48px;
border-radius: 20px;
box-shadow: 5px 6px 26px -6px rgba(23, 92, 255, 0.55) ;
background: -webkit-linear-gradient(left,#2e6ef0, #1c4be6); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #2e6ef0, #1c4be6); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #2e6ef0, #1c4be6); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #2e6ef0, #1c4be6);
animation: kefu 1.5s ease-in-out infinite;
}
#kefu a {
text-align: center;
color: white;
font-size: 16px;
line-height: 48px;
}
#kefu a span {
margin-left: 5px;
}
</style>
</head>
<body>
<div id="kefu">
<a href="javascript:void(0);">
<i class="iconfont icon-liaotian"></i>
<span>點我諮詢</span>
</a>
</div>
</body>
</html>
transform-origin
transform-origin作用
這個屬性是用來改變元素變形的原點，一般用來配合旋轉來使用最多。接收參數可爲一個、兩個、三個。當爲兩個值，分別代表距離盒模型左側的值，如transform-origin: 50px 50px;，表示該容器的旋轉中心變爲以盒模型左上角爲原點，X和Y軸距離50px爲原點進行旋轉。
| 值 | 描述 |
|---|---|
| x-axis | 定義視圖被置於 X 軸的何處 |
| y-axis | 定義視圖被置於 Y 軸的何處 |
| z-axis | 定義視圖被置於 Z 軸的何處 |
x,y軸可能的值有：left，center，right，length，%
z軸的值是：length
