Web - CSS3过渡与动画

过渡

基本使用

transition过渡属性是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加补间动画。

过渡从kIE10开始兼容，移动端兼容良好，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为css3过渡。

transition属性有4个要素：过渡属性、动画时长、变化速度曲线、延迟时间，需要注意的是时间单位后面的s是不能省略的。

所有数值类型的属性，都可以参与过渡，比如：width、height、left、top、border-radius

css 复制代码

.box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    transition: width 5s linear 0s;
    margin-bottom: 10px;
}

.box1:hover {
    width: 800px;
}

背景颜色和文字颜色都可以被过渡。

css 复制代码

.box2:hover p {
    left: 1000px;
}

.box3 {
    width: 200px;
    height: 200px;
    background-color: red;
    transition: background-color 1s linear 0s;
    margin-bottom: 10px;
}

.box3:hover {
    background-color: green;
}

所有的变形(包括2D和3D)都能被过渡。

css 复制代码

/**2D过渡*/
.box5 {
    width: 200px;
    height: 200px;
    background-color: orange;
    margin-bottom: 10px;
    transition: transform 1s linear 0s;
}

.box5:hover {
    transform: scale(1.2) rotate(360deg);
}


/**3D过渡*/
.box6 {
    perspective: 300px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}

.box6 p {
    width: 200px;
    height: 200px;
    background-color: orange;
    transition: transform 1s linear 0s;
}

.box6:hover p {
    transform: rotateX(360deg) rotateY(360deg);
}

如果要所有的属性都参数过渡，可以写all。

css 复制代码

.box7 {
    width: 200px;
    height: 200px;
    background-color: orange;
    border-radius: 0;
    transition: all 1s linear 0s;
}
.box7:hover {
    width: 400px;
    height: 160px;
    background-color: green;
    border-radius: 50%;
}

过渡的四个小属性：

属性	意义
transition-property	那些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线(缓动效果)
transition-delay	延迟时间

缓动效果

transition的第三个参数就是缓动参数，也是变化速度曲线，常用的缓动参数：

1、linear

线性过渡，元素在过渡过程中以恒定的速度变化，没有加速或减速效果。

2、ease

默认的缓动函数，过渡开始时较慢，然后加速，最后再减速。这是一种自然的过渡效果，常用于大多数场景。

3、ease-in

过渡开始时较慢，然后逐渐加速，结束时速度最快。常用于强调进入效果。

4、ease-out

过渡开始时速度最快，然后逐渐减速，结束时最慢。常用于强调退出效果。

5、ease-in-out

过渡开始和结束时较慢，中间加速。是 ease 函数的更明显版本。

6、cubic-bezier

自定义贝塞尔曲线缓动函数。该函数接受四个参数，分别是贝塞尔曲线的两个控制点的 x 和 y 坐标，取值范围在 0 到 1 之间。

可以去网站https://cubic-bezier.com可以生成内赛尔曲线，可以自定义动画缓动参数。

css 复制代码

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s cubic-bezier(0.42, 0, 0.58, 1);
}

.box:hover {
    width: 200px;
}

7、steps()

css 复制代码

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s steps(5, end);
}

.box:hover {
    width: 200px;
}

动画

可以使用@keyframes来定义动画，keyframes表示关键帧，在项目上线前，要补上@-webkit-这样的私有前缀。

from表示起始状态,to表示结束状态。

css 复制代码

@keyframes movelr {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(1000px);
    }
}

定义动画之后，就可以使用animation属性调用动画，animation参数的属性依次是：动画名字、总时长、缓动效果、延迟。

animation第五个参数就是动画的执行次数，如果想永远执行可以写infinite。

css 复制代码

/**movelr 是定义的动画名称*/
.box2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    animation: movelr 2s linear 0s infinite alternate;
}

如果想让动画的第2、4、6...偶数次自动逆行执行，那么要加上alternate参数即可。

css 复制代码

.box2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    animation: movelr 2s linear 0s infinite alternate;
}

如果想让动画停止在最后结束状态，那么要加上forwards。

css 复制代码

.box3 {
    width: 200px;
    height: 200px;
    background-color: green;
    animation: changeToCircle 1s linear 0s forwards ;
}

多关键帧动画实例如下：

css 复制代码

.box4 {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: changeColor 3s linear 0s alternate infinite;
}

@keyframes changeColor {
    0% {
        background-color: red;
    }
    20% {
        background-color: yellow;
    }
    40% {
        background-color: blue;
    }
    60% {
        background-color: green;
    }
    80% {
        background-color: purple;
    }
    100% {
        background-color: orange;
    }
}