CSS transition 过渡

这篇具有很好参考价值的文章主要介绍了CSS transition 过渡。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 前言

CSS过渡(transition)可以在一个元素切换到另一种状态时为其定义平滑的过渡效果。

例如,用户鼠标悬停在按钮上时,按钮颜色平滑的从一个颜色过渡到另一个颜色。

.btn:hover{
    background-color: red;
    color: black;
}

默认悬停效果

CSS transition 过渡,CSS,css,前端

添加过渡效果

.btn{
    transition-duration: 0.8s;
    transition-timing-function: ease;
}

CSS transition 过渡,CSS,css,前端

transition是transition-property、transition-duration、transition-timing-function、transition-delay的简写属性。

下面来一一介绍这些属性。

2 transition-property

这个属性指定应用过渡效果的属性名。

它有以下取值:

  • all:默认值,表示过渡效果应用到所有可过渡的属性上。
  • none:没有过渡动画。
  • <property-name>:指定应用过渡效果的属性名,你可以指定多个值,使用逗号分隔。
  • initial:重置为初始值。
  • unet:重置为默认值。

3 transition-duration

过渡周期,过渡效果的持续时间。

默认值为0s,即没有过渡效果。

属性值以秒或毫秒为单位,像transition-property一样,你也可以设置多个值,它们会自动对应transition-property指定的属性名。

如果时间周期数小于过渡属性数,那么周期数会重复应用;如果时间周期数大于过渡属性数,那么时间周期数多余的部分被忽略。

4 transition-timing-function

过渡效果的时间函数,决定了动画变化速度。

CSS transition 过渡,CSS,css,前端

下面是它的属性值介绍。

1)ease

默认值。

过渡在开始时速度较慢,中间时加速,结束时减速。

2)ease-in

过渡开始时速度较慢,然后逐渐加速。

3)ease-out

开始时速度较快,然后逐渐减速。

4)ease-in-out

过渡开始和结束时速度较慢,中间时速度较快。相比于ease更加平滑。

5)linear

过渡速度恒定,没有加速或减速,呈线性变化。

6)step-start

在过渡的开始时立即跳到结束状态。

7)step-end

在过渡的结束时立即跳回开始状态。

8)steps函数

例如steps(4,jump-end)表示将过渡划分为4步,每一步结束时立即跳到结束状态。

第二个参数有以下值:

  • jump-start:在每一步开始时立即跳到结束状态。
  • jump-end:在每一步结束时立即跳到结束状态。
  • jump-none:没有跳跃,过渡效果平滑进行。
  • jump-both:在每一步的开始和结束时都立即跳到结束状态。

9)cubic-bezier函数

CSS transition 过渡,CSS,css,前端

接受四个参数,分别定义了时间曲线上的两个控制点。

这四个参数的取值范围是从0到1之间。

这四个参数的组合决定了贝塞尔曲线的形状,从而影响了过渡效果的速度和变化。

你可以使用在线的贝塞尔曲线生成器来可视化和调整这些参数。

5 transition-delay

过渡之前需要等待的时间。

6 移动小球Demo

CSS transition 过渡,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-695110.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动小球Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .ball{
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: red;
            transition:all  7s ease;
        }
        .move {
            transform: translateX(300px); /* 将小球向右移动 */
        }
    </style>
</head>

<body>
    <button id="animateButton">移动</button>
    <div class="ball"></div>
    
    <script>
        const animateButton = document.getElementById("animateButton");
        const ball = document.querySelector(".ball");

        animateButton.addEventListener("click", () => {
            ball.classList.toggle("move");
        });
    </script>
</body>

</html>

到了这里,关于CSS transition 过渡的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器:选择平级元素的唯一办法 -适用:通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器: 属性选择器: -通过元素的属性来定位元素 1、通用:基本用不着,太泛了 2、自定义:4种 1、精确条件: 2、模糊条件: 3、模糊条件:很少用,

    2024年04月09日
    浏览(51)
  • 前端 | ( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(47)
  • 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月19日
    浏览(58)
  • 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月15日
    浏览(36)
  • 【前端知识】React 基础巩固(二十九)——过渡动画 react-transition-group

    react-transition-group 包含: Transition(该组件是一个和平台无关的组件,不一定结合 CSS) CSSTransition(通常使用此组件实现过渡动画效果) SwitchTransition(两个组件显示/隐藏切换时使用) TransitionGroup(将多个动画包裹其中,一般用于列表中元素的动画) CSSTransition CSSTransition 基于

    2024年02月16日
    浏览(65)
  • css3的过度效果transition支持哪些属性,Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: 名称 描述 属性 color:  通过红、绿、蓝和透明度组件变换(每个数值处理) 如: background-color, border-color, color, outline-color等css属性; length: 真实的数字 如: word-spacing, width, verti

    2024年01月17日
    浏览(48)
  • css transition属性

    如果想实现一些效果:比如一个div容器宽高拉伸效果,或者一些好看的有过渡的效果可以使用 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property transition-duration transition-timing-function transition-delay 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300p

    2024年02月10日
    浏览(38)
  • vue transition结合animate.css动画库

    安装 npm install animate.css --save 在main.js中引用 import animated from \\\'animate.css\\\' Vue.use(animated) 在transition标签上使用 此处有坑:4.x版本的animate在使用的时候要在动画名称加前缀animate__动画名 ,其他版本的不用直接使用动画名称就行 在某一项被插入或者移出时,它周围的元素会立即发

    2024年02月20日
    浏览(40)
  • CSS基础-过渡动画

    CSS3新添加了过渡动画, 即使用者定义好 一个元素的 开始状态 和 结束状态 , CSS会根据变化曲线形成 补间动画 效果。 CSS3中用 transition 属性来描述动画如何运动。 定义 下面我们重点了解下, 哪个属性需要过渡 , 还有 变化曲线是什么 下面我们重点聊聊两点: 哪个属性需要

    2024年02月10日
    浏览(50)
  • 【CSS】过渡动画

    不加过渡动画,变化不太流畅 MDN css transitions w3school transform transform :用于元素的变形,显示变形后的状态,不是变形的过程,变形过程需要配合 transition 表示 2D 转换 translate(50px, 100px) 平移 rotate(20deg) 顺时针旋转 20 度 rotateX(150deg) 绕其 X 轴旋转给定角度 scaleX(2) 增大为其原始

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包