过渡动画

过渡

transition: property duration timing-function delay;

// 边框半径延迟2秒后逐渐变大
transition: border-radius 5s ease-in-out 2s;

属性	作用	属性值
property	过渡效果	none:无效果 all:所有属性过渡 property:定义属性过渡
duration	过渡效果持续时间	秒(s)
timing-function	过渡效果速度	linear:匀速 ease:慢速开始，然后变快结束 ease-in:慢速开始 ease-out:变慢结束 ease-in-out:慢速开始，然后变快结束
delay	过渡效果延迟时间	秒(s)

变形

属性	作用	属性值
translate()	平移	2个参数
scale()	缩放	2个参数
skew()	倾斜	2个参数
rotate()	旋转	1个参数

平移

transform:translate (x,y);

// 左移100px，上移50px
transform:translate(100px,50px);

// 左移100px
translateX(100px);

//上移50px
translateY(50px);

左上为正，右下为负

缩放

transform:scale(x,y);

// 2倍宽，3倍高
transform:scale(2,3);

// 2倍宽
scaleX(2);

// 3倍高
scaleY(50px);

倾斜(逆时针)

transform:skew(x,y);

// x轴倾斜30度，y轴倾斜10度
transform:skew(30deg,10deg);

// x轴倾斜30度
skewX(30deg);

// y轴倾斜10度
skewY(10deg);

旋转(逆时针)

transform:rotate(angle);

// 逆时针旋转30度
transform:rotate(30deg);

// x轴旋转30度
transform:rotateX(30deg);

// y轴旋转30度
transform:rotateY(30deg);

中心点

transform-origin:x y;

transform-origin:20% 30%;

3D转换

transform:translate3d(x,y,z,angle);

属性	作用	属性值
transform	2D转换、3D转换
transform-origin	设置转换的原点	x,y
transform-style	设置元素转换时使用的3D空间	flat: 2D空间 preserve-3d: 3D空间
perspective	设置元素的3D空间	none: 无 number: 值越大，3D空间离用户越近
perspective-origin	设置3D空间中的转换原点	x,y
backface-visibility	设置元素转换时是否可见	visible: 可见 hidden: 不可见

动画

animation: name duration timing-function delay iteration-count direction;

// 淡入动画
@keyframes appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
animation: appear 3s linear 2s 1 alternate; // appear类的动画持续3秒，延迟2秒开始，执行1次，交替执行

// 第二种写法
@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
animation: appear 3s linear 2s 1 alternate;

属性	作用	属性值
@keyframes	定义动画	name
name	动画名称	name
duration	动画持续时间	time
timing-function	动画速度	linear:匀速 ease:慢速开始，然后变快结束 ease-in:慢速开始 ease-out:变慢结束 ease-in-out:慢速开始，然后变快结束
delay	延迟时间	time
iteration-count	动画重复次数	number
direction	动画方向	normal:正常 reverse:反向 alternate:交替 alternate-reverse:交替反向

index.html

<div id="first"></div>
<div id="second"></div>

index.css

#first{
    width: 100px;
    height: 100px;
    background-color: pink;
    transition: width 1s;
}
#first:hover{
    width: 300px;
    height: 300px;
}
#second{
    width: 100px;
    height: 100px;
    background: brown;
    margin-top: 10px;
    animation: move 4s 1;position: relative;
}
@keyframes move {
    0% {
        left: 100px;
    }
    100% {
        left: 0px;
    }
}

index.js

var dom = document.getElementById("first");
dom.addEventListener('transitionend',myFunction)
function myFunction(){
    this.innerHTML = "过渡完成";
    this.style.backgroundColor = "yellow";
}

var dom2 = document.getElementById("second");
dom2.addEventListener('animationend',myFunction2)
function myFunction2(){
    this.innerHTML = "动画完成";
    this.style.backgroundColor = "yellow";
}