CSS transition和animation的用法和区别

Transition和Animation在CSS中都是用于实现元素状态变化的效果,但它们在用法和特性上存在明显的区别。

Transition

transition是过度属性,主要强调的是元素状态的过渡效果

它通常用于在元素的状态发生变化时,平滑地过渡到一个新的状态。

Transition的语法包括指定要过渡的CSS属性、过渡效果的持续时间、速度曲线以及开始延迟等。

例如,当鼠标悬停在div元素上时,可以使用Transition来实现宽度和高度的平滑过渡:

div {  width: 100px;  height: 100px;  background-color: red;  transition: width 1s ease-in-out, height 0.5s linear;  
}  div:hover {  width: 200px;  height: 200px;  
}

在这个例子中,当鼠标悬停在div上时,其宽度和高度会平滑地过渡到新的值,过渡的持续时间分别为1秒和0.5秒,速度曲线分别为ease-in-out和linear。


Animation

animation是动画属性,加强调流程和控制,它提供了更多的自由度和复杂性。

它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画。

Animation使用关键帧(keyframes)来定义动画的多个状态,并可以指定每个状态的样式。

此外,Animation还封装了循环次数、动画延迟等功能。

Animation的使用步骤如下:

  1. 定义动画
    使用@keyframes规则来定义动画的各个状态。

    @keyframes change {  0% { width: 200px; }  50% { width: 500px; height: 300px; }  100% { width: 800px; height: 500px; }  
    }
    
  2. 使用动画
    将定义的动画应用于需要动画效果的元素上。

    div {  animation-name: change;  animation-duration: 4s;  
    }
    

    在这个例子中,div元素的宽度和高度会在4秒内按照定义的关键帧进行变化。


区别

  • 控制粒度
    Transition的控制粒度相对较粗,主要关注过渡的速度和方式。
    Animation提供了更细粒度的控制,可以手动指定每个阶段的属性,以及循环次数、动画延迟等功能。

  • 状态数量
    Transition只有两个状态:开始状态和结束状态。
    Animation可以有多个状态,通过关键帧来定义,更加灵活和自由。

  • 触发方式
    Transition需要借助其他方式(如CSS状态选择器或JavaScript)来触发。
    Animation的触发方式则更加多样,可以通过设置动画属性直接触发。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高德地图API-鼠标点击地图获取经纬度坐标(关键操作)

效果图&#xff1a; 有了经纬度坐标&#xff0c;就可以得到城市的&#xff1a;adcode区域编码 html版本 <!doctype html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"&g…

瞪羚企业申报要求材料

申报企业还需提供以下材料&#xff0c;并依顺序装订成册。申报材料的内容一定要能够公开的&#xff0c;不会涉及到国家安全等机密信息。 1.“瞪羚企业”认定申请书&#xff1b; 2.企业营业执照复印件&#xff1b; 3.经审计的近三年的财务报告&#xff1b; 4.近3年企业所得税…

低配置的电脑上刷新WPF DataGrid 很卡,如何优化?

要优化低配置电脑上WPF DataGrid的刷新卡顿问题&#xff0c;可以尝试以下几种方法&#xff1a; 启用虚拟化技术&#xff1a; VirtualizingStackPanel.IsVirtualizing"True" 。 WPF DataGrid支持行虚拟化&#xff0c;这意味着只有当前可见的行会被加载和渲染&#xf…

HarmonyOS NEXT中怎么理解HAR、HAP、HSP、App的关系

文章目录 一、HAR1.1 简介1.2 使用场景1.3 约束限制 二、HAP2.1 简介2.2 使用场景2.3 约束限制 三、HSP3.1 简介3.2 使用场景3.3 约束限制 四、小结 一、HAR 1.1 简介 HAR&#xff08;Harmony Archive&#xff09;是静态共享包&#xff0c;可以包含代码、C库、资源和配置文件…

backtracking Leetcode 回溯算法题

77.组合 第一个位置选择有 n 种&#xff0c;接下来每个位置只能在前面选择数字的后面选&#xff0c;所以有了 beg 参数&#xff0c;才能保持不重复 剪枝&#xff1a;res.size (n - beg 1) < k , 已有答案的长度 剩余所有未选择的个数 都小于最终答案长度了 就没有必要尝…

Unity类银河恶魔城学习记录13-1 p142 Save system源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili FileDataHandler.cs using System; using System.IO; using UnityEngine; p…

数据结构学习记录

数据结构 数组 & 链表 相连性 | 指向性 数组可以迅速定位到数组中某一个节点的位置 链表则需要通过前一个元素指向下一个元素&#xff0c;需要前后依赖顺序查找&#xff0c;效率较低 实现链表 // head > node1 > node2 > ... > nullclass Node {constructo…

基于springboot+vue+Mysql的社区维修平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

软件产品许可证书 Licence 全流程研发(使用非对称加密技术,既安全又简单)

本篇博客对应的代码地址&#xff1a; Gitee 仓库地址&#xff1a;https://gitee.com/biandanLoveyou/licence 源代码百度网盘链接: https://pan.baidu.com/s/1_ZhdcENcrk2ZuL11hWDLTQ?pwdbmxi 提取码: bmxi 1、背景介绍 公司是做软件 SAAS 服务的&#xff0c;一般来说软件部…

分析SQL中的ON后面AND条件与WHERE后AND的区别及其应用场景

引言ON条件 - 连接条件 示例1 - ON条件用于连接表示例2 - ON中多个连接条件WHERE条件 - 数据过滤 示例3 - WHERE条件应用于连接结果区别与结合使用总结 引言 在SQL查询中&#xff0c;JOIN子句的ON条件和WHERE子句的AND条件都用于筛选数据&#xff0c;但它们的应用上下文和作用方…

RabbitMQ项目实战(一)

文章目录 RabbitMQ项目实战选择客户端基础实战 前情提要&#xff1a;我们了解了消息队列&#xff0c;RabbitMQ的入门&#xff0c;交换机&#xff0c;以及核心特性等知识&#xff0c;现在终于来到了激动人心的项目实战环节&#xff01;本小节主要介绍通过Spring Boot RabbitMQ S…

AppsFlyer 接入更新

SDK文档 最新的 SDK 已经支持了 UPM 的接入方式&#xff0c;直接输入链接就可以安装好&#xff0c; 只需要 resolve 通过然后就可以使用了。

盒子模型和圆角边框的属性

一、标准盒子模型 content padding border margin 定义 width 和 height 时&#xff0c;参数值不包括 border 和 padding 二、怪异盒子模型 能不能实现怪异盒子模型全看属性 box-sizing&#xff0c;box-sizing 属性的取值可以为 content-box 或 border-box。 content-b…

CentOS 7 中时间快了 8 小时

1.查看系统时间 1.1 timeZone显示时区 [adminlocalhost ~]$ timedatectlLocal time: Mon 2024-04-15 18:09:19 PDTUniversal time: Tue 2024-04-16 01:09:19 UTCRTC time: Tue 2024-04-16 01:09:19Time zone: America/Los_Angeles (PDT, -0700)NTP enabled: yes NTP synchro…

DRF分页接口

DRF分页接口 目录 DRF分页接口PageNumberPagination&#xff08;基本分页类&#xff09;LimitOffsetPagination&#xff08;偏移分类)CursorPagination&#xff08;游标分页&#xff09; 实战 PageNumberPagination&#xff08;基本分页类&#xff09; 特点 基于页码的分页方式…

CS信息系统建设和服务能力评估申报知识点

代科技快速发展&#xff0c;云计算、大数据、物联网、移动互联网等新一代信息技术发展迅速&#xff0c;信息化服务模式正经历着重大的变化。而CS信息系统建设和服务能力评估是反映信息系统建设和服务提供者的能力水平的一个证书&#xff0c;现在许多企业都在办理这个资质。那么…

2021年全国大学生电子设计竞赛D题——基于互联网的摄像测量系统(三)

13 测试方案和测量结果 测量一个边长为1米的正方形&#xff0c;取三个顶点分别作为O、A、B点。 在O点上方&#xff0c;用细线悬挂激光笔&#xff0c;激光笔常亮向下指示&#xff0c;静止时激光笔的光点和O点重合。 将两个D8M摄像头子卡插到DE10-Nano开发板上&#xff0c;放…

对象生命周期:Transient(瞬态)、Scoped(范围)、Singleton(单例)

在对象生命周期和依赖注入&#xff08;DI&#xff09;的上下文中&#xff0c;特别是在使用如Microsoft.Extensions.DependencyInjection&#xff08;.NET Core的DI容器&#xff09;等框架时&#xff0c;对象的生命周期通常被划分为几个不同的类型&#xff1a;Transient&#xf…

MySQL Linux环境安装部署

目录 1、mysql安装包下载 2、安装mysql服务 3、启动mysql服务 4、登录mysql服务 1、mysql安装包下载 1、查看centos的版本 cat /etc/redhat-release 2、进入官网地址下载对应系统版本的安装包 地址&#xff1a;MySQL :: Download MySQL Yum Repository 2、安装mysql服务 …

MySQL运维实战之ProxySQL(9.3)使用ProxySQL实现读写分离

作者&#xff1a;俊达 proxysql读写分离主要通过mysql_query_rules表中的规则来实现。 下面是具体的配置步骤&#xff1a; 1 hostgroup配置 insert into mysql_servers (hostgroup_id, hostname, port, max_replication_lag) values ( 100, 172.16.121.236, 3380, 3);inser…