CSS3中translate、transform、translation和animation的區別

小圖子發表於2019-02-27
CSSS3ORM

1.translate 移動

通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：

用法:

 transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px); 
複製程式碼

2.transform 改變、變形

旋轉：rotate() 順時針旋轉給定的角度，允許負值 rotate(30deg) 扭曲：skew() 元素翻轉給定的角度,根據給定的水平線(X 軸) 和垂直線（Y 軸）引數：skew(50deg,20deg) 縮放：scale() 放大或縮小，根據給定的寬度(X 軸)和高度(Y 軸)引數： scale(2,4) 移動：translate() 平移，傳進 x,y值，代表沿x軸和y軸平移的距離

綜合起來使用：transform: 30deg 1.5 50deg 20deg 100px 200px;

3.transition 過渡

允許CSS屬性值在一定的時間區間內平滑的過渡，需要事件的觸發，例如單擊、獲取焦點、失去焦點等

transition:property duration timing-function delay;
複製程式碼
  • transition-property 規定設定過渡效果的 CSS 屬性的名稱。
  • transition-duration 規定完成過渡效果需要多少秒或毫秒。
  • transition-timing-function 規定速度效果的速度曲線。
  • transition-delay 定義過渡效果何時開始。
<style>
 div{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
 }
div:hover
 {
    width:300px;
 }
</style>
<div></div>
複製程式碼

4.animation 動畫

語法 animation: name duration timing-function delay iteration-count direction; animation-name 規定需要繫結到選擇器的 keyframe 名稱. animation-duration 規定完成動畫所花費的時間，以秒或毫秒計. animation-timing-function 規定動畫的速度曲線. animation-delay 規定在動畫開始之前的延遲. animation-iteration-count 規定動畫應該播放的次數. animation-direction 規定是否應該輪流反向播放動畫.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>
複製程式碼

相關文章