css动画效果之transition

news2025/1/23 22:40:29

transition-property

规定设置过渡效果的 CSS 属性的名称。

属性名	属性值
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

使用方式

transition-property: width,background;/* 多个效果可用逗号隔开或使用all代替全部 */

transition-duration

规定完成过渡效果需要多少秒或毫秒。

属性名	属性值
ns/ms	时间单位

使用方式

transition-duration: 5s;

transition-timing-function

规定速度效果的速度曲线。

属性名	属性值
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

使用方式

transition-timing-function: linear;

transition-delay

定义过渡效果何时开始。

属性名	属性值
ns/nms	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

使用方式

transition-delay: 2s;

整合使用方式

transition:all 4s linear

最终效果

代码展示

html代码

<div class="box"></div>

css代码

body, html {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    height: 100px;
    width: 100px;
    background-color: #e74c3c;
    /*简写*/
    transition: all 1s ease-in;
    /*属性名区别*/
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 1s;
}

.box:hover {
    height: 200px;
    width: 200px;
    background-color: springgreen;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/151313.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！