CSS过渡学习笔记

发布时间：2024-12-17 16:41:57

CSS过渡学习笔记


什么是CSS过渡？


CSS过渡（CSS Transitions）用于控制CSS属性变化的速率，使属性变化平滑进行，而不是瞬间完成。


使用场景：



鼠标悬停按钮颜色渐变
图片放大效果
菜单滑动展开


示例：


.box {
    width: 100px;
    height: 100px;
    background-color: orangered;
    transition: background-color 1s;
}
.box:hover {
    background-color: yellowgreen;
}




CSS过渡属性


transition


transition 是一个简写属性，可一次性定义所有过渡相关属性。


语法：


transition: property duration timing-function delay;


1. transition-property



指定需要应用过渡的CSS属性。
如：color, width, height


2. transition-duration



定义过渡动画所需时间。
如：1s (1秒)


3. transition-timing-function



定义动画的时间曲线。
常用值：
linear：匀速
ease：默认，先慢后快再慢
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始与结束


4. transition-delay



延迟过渡效果的开始时间。


示例：


.box {
    transition: width 2s ease-in-out 1s;
}




可过渡的CSS属性


只有具有中间值的属性才可实现CSS过渡。


支持的属性示例：



颜色属性：color, background-color
长度属性：width, height, padding
位置属性：top, left
透明度：opacity


不可过渡的属性：



display
visibility




同时设置多个过渡


可以通过逗号分隔实现多个属性的同时过渡。


.box {
    transition: height 1s ease, width 1s ease;
}




使用all关键字



transition: all可以对所有可过渡的属性生效。
注意：性能较差，推荐针对具体属性使用。


.box {
    transition: all 1s;
}




高级用法：结合 transform


旋转过渡


.box {
    transition: transform 1s ease;
}
.box:hover {
    transform: rotate(180deg);
}


缩放过渡


.box {
    transition: transform 1s;
}
.box:hover {
    transform: scale(1.2);
}


平移过渡


.box {
    transition: transform 1s;
}
.box:hover {
    transform: translateX(50px);
}




练习示例


翻转卡片动画


<div class="flip-card">
    <div class="front face">Hello World</div>
    <div class="back face"></div>
</div>



.flip-card {
    perspective: 1000px;
}
.flip-card .face {
    transition: transform 1s;
    backface-visibility: hidden;
}
.flip-card:hover .front {
    transform: rotateY(180deg);
}
.flip-card:hover .back {
    transform: rotateY(0deg);
}




总结



CSS过渡用于平滑过渡元素属性。
使用transition简写属性可控制多个属性的过渡效果。
常与transform搭配使用。
需注意性能问题，避免使用all。


下一步学习： CSS动画（Keyframes）。

评论数：0