css3动画

分类：

• 帧动画
• 过渡动画

CSS3动画属性：

• transition
• animation

常用属性

• transform

动画库：

• swiper
• vue-transition
• svg
• animate.css

transition过渡

语法

transition: property duration timing-function delay;

属性名称property

过渡时间duration

时间函数timing-function

延迟时间delay

2、注意：

• display不能和transition一起使用

• transition后面尽量不要跟all

• 常见闪动可以persp和backface-visibility

.box{
    width: 200px;
    height: 200px;
    background-color: #000000;
    margin-bottom: 20px;
}

// 鼠标经过变化宽度
.trasition-1{
    // transition: width 2s linear 1s;
    transition: width 2s linear;

    &:hover{
        width: 500px;
    }
}

// 鼠标经过旋转
.trasition-2{
    transition: transform 2s ease-out;

    &:hover{
        transform: rotate(45deg);
    }
}

animation动画

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画名称（name）@keyframes

过渡时间(duration)

时间函数(timing-function)

延迟时间(delay)

播放次数（iteration-count）

播放方向（direction）轮流播放和反向播放

停止播放的状态（fill-mode）

是否暂停（play-state）

.box{
    width: 200px;
    height: 200px;
    background-color: #000000;
    margin-bottom: 20px;
}

// 鼠标经过移动
.animation-1{
    &:hover{
        animation: move 2s linear;
    }
}

@keyframes move{
    100%{
        transform: translateX(200px);
    }
}

// 小球滚动
.animation-2{
    border-radius: 50%;
    animation: jump 2s cubic-bezier(0.4,-0.04, 0.94, 0.29) infinite;
}

@keyframes jump{
    0%{
        transform: translateX(0px);
    }
    40%{
        transform: translateX(200px);
    }
    60%{
        transform: translateX(200px);
        clip-path: ellipse(50% 50% at 50% 50%);
    }
    100%{
        transform: translateX(0px);
        clip-path: ellipse(50% 45% at 50% 48%);
    }
}

// 菊花图旋转
.animation-3{
    width: 100px;
    height: 111px;
    animation: round 1s steps(12) infinite;
    background: url(./loading.jpg) no-repeat;
}


@keyframes round{
    100%{
        transform: rotate(360deg);
    }
}

时间函数

时间函数：管理动画在单位帧内播放的速度曲线 三次贝塞尔函数的数学函数 预设值：

• linear 匀速
• ease
• ease-in
• ease-out
• ease-in-out

steps作用是每一个关键帧，而不是整个时间

过渡和动画在js中的监听

animationstart animationend trasitionend animationitertion

// 过渡事件监听
let transitionend = ()=>{
    console.log("transitionend");
}
let $box = document.querySelector('.trasition-1');
// IE FireFox已经支持
$box.addEventListener("transitionend", transitionend);
// 360 safari chrome下需要兼容处理
$box.addEventListener("WebkitTransitionend", transitionend);