transform、transition、animation使用

1 使用Demo

1.1 transform

HTML

<div id="div">正</div>

CSS

#div {
    margin: 300px;
    width: 200px;
    height: 100px;
    background: red;
}
#div:hover {
    /*transform: rotate(-90deg);*/
    /*transform: skew(30deg, 0deg);*/
    /*transform: scale(2);*/
    /*transform: translate(20px, 0);*/
}

1.2 transform3D

HTML

<div id="box">
    <div id="div">正</div>
</div>    

CSS

#box {
    width: 200px;
    height: 200px;
    padding: 100px;
    background-color: pink;
    perspective: 200px;			// 父元素必须添加这个属性，才有近大远小的效果
}
#div {
    transition: 3s;
    width: 200px;
    height: 200px;
    background: aqua;
    font: 140px/200px "宋体";
    color: #fff;
    text-align: center;
}
#box:hover #div {
    transform: rotateX(360deg);
}

1.3 transition

HTML

<div id="box"></div>

CSS

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: 1s width, 1s 2s height, 1s background;
}
#box:hover {
    width: 200px;
    height: 200px;
    background: blue;
}

1.4 animation

HTML

<div id="box"></div>

CSS

#box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: red;
    animation: move 4s  linear infinite alternate;
}
@keyframes move {
    25% {
        left: 400px;
        top: 0;
    }
    50% {
        left: 400px;
        top: 400px;
    }
    75% {
        left: 0;
        top: 400px;
    }
}

2 适用场景

transform：图片 / 元素，静态变化（旋转，缩放，倾斜或平移）

transition：简单动画

animation：复杂动画

3 详细参数

3.1 transform

作用：让图片 / 元素旋转，缩放，倾斜或平移

参数：

1. transform

   • rotate(30deg) 旋转30度
   • skew() | skewX() | skewY() 斜切
   • scale() | scaleX() | scaleY() 缩放
   • translate() | translateX() | translateY() 位移

2. transform-origin 元素变换的基点（默认围绕中心点变换）

事件：无

注意：

1. 写在后面的元素先计算

transform: scale(.5) translateX(200px);// 先移动200px，后缩放

2. 旋转，缩放，斜切 都是围绕着元素的中心点进行变换

3.2 transform3D

作用：产生3D的视觉变换效果

参数：

1. perspective 景深（我们的视角与元素之间的距离）必须设置才有3D效果
2. transform
   • rotate3d() | rotateX() | rotateY() | rotateZ() 围绕轴旋转
   • scale3d() | scaleX() | scaleY() | scaleZ() 缩放
   • translate3d() | translateX() | translateY() | translateZ() 移动
3. transform-style: preserve-3d; 元素进行3d变化时，保留子元素3d变换
4. transform-origin: center center 0; 旋转中心点
5. perspective-origin: center center; 景深基点
6. backface-visibility: hidden; 隐藏背面：加给 3d 每一个面

事件：无

注意：

1. 3D变化必备三要素：perspective、transform-style、transform

3.3 transition

作用：给元素添加一个过渡动画

参数：

1. transition-delay 延迟时间，动画延迟多长时间执行(s|ms) 默认值0s
2. transition-duration 动画时长，动画用多长时间完成(s|ms) 默认值 0s
3. transition-property 要动画的样式 默认值 all
4. transition-timing-function 动画形式
   • linear 匀速
   • ease 缓冲(默认值)
   • ease-in 加速
   • ease-out 减速
   • ease-in-out 先加速再减速
   • cubic-bezier() 贝塞尔曲线

事件：

// 只能通过事件监听添加
box.addEventListener('transitionend',function(){
    console.log("动画执行了");
});
// 兼容低版本WebKit浏览器
box.addEventListener('WebKitTransitionEnd',function(){
    console.log("动画执行了");
});

注意：

若transition作用的元素，还未渲染完成，transition不起作用

3.4 animation

作用：能实现比transition更复杂的动画

参数：

1. animation-name 动画帧名称
2. animation-duration 动画持续时间
3. animation-timing-function 动画形式(参考 transition)
4. animation-delay 动画开始前的延迟时间
5. animation-iteration-count 动画执行次数 number | infinite(无限次)
6. animation-direction 偶数次动画执行过程 alternate(倒序执行) | normal(顺序执行)
7. animation-fill-mode 设置动画 开始 / 结束 时的样式 backwards | forwards | both
8. animation-play-state 动画 开始 / 暂停 paused(暂停) | running(播放)

事件：

var box = document.querySelector("#box");
// 开始
box.addEventListener("animationstart",function(){
    console.log("动画开始");
});
// 结束
box.addEventListener("animationend",function(){
    console.log("动画结束");
});
// 多次执行
box.addEventListener("animationiteration",function(){
    console.log("动画又开始");
});

注意：

​ 若不设置animation-fill-mode，则动画执行完后默认回到计算后样式（CSS设置的最初样式）