Web - CSS3过渡与动画

过渡

基本使用

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

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

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

所有数值类型的属性,都可以参与过渡,比如:widthheightlefttopborder-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;
    }
}
相关推荐
中微子27 分钟前
React状态管理最佳实践
前端
烛阴36 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子43 分钟前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码1 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js