当前位置: 首页 > news >正文

CSS3》》 transform、transition、translate、animation 区别

总结:transform是转换。transition是样式过渡。translate是移动,translate 是transform的属性值。
在这里插入图片描述
在这里插入图片描述
reflow-回流 和 repaint-重绘

.box {transform: rotate(45deg) scale(1.2); /* 静态:元素被旋转和放大 */
}

在这里插入图片描述

.box {transform: translate(100px, 50px); /* 将元素向右移动100px,向下移动50px */
}

在这里插入图片描述
在这里插入图片描述

/* 1. 先定义关键帧 */
@keyframes bounce {0%   { transform: translateY(0); }50%  { transform: translateY(-30px); }100% { transform: translateY(0); }
}/* 2. 再将动画应用到元素上 */
.box {animation: bounce 2s ease-in-out infinite; /* 应用名为'bounce'的动画,时长2秒,无限循环 */
}

在这里插入图片描述

.button {/* 初始状态 */transform: scale(1);/* transition 属性一般写在元素的默认状态(初始样式)中,而不是写在触发状态(如 :hover)里。*/transition: transform 0.2s ease; /* 设置transform属性变化的过渡 *//* 也可以直接写为:transition: all 0.2s ease;*/
}.button:hover {/* 最终状态:放大1.1倍 */transform: scale(1.1);/* transition 会负责让这个放大过程在0.2秒内平滑完成 */
}//transform 定义了元素的视觉变化(从 scale(1)scale(1.1))。//transition 定义了这个变化如何发生(用0.2秒时间,以ease曲线平滑过渡)。

transition 属性一般写在元素的默认状态(初始样式)中,而不是写在触发状态(如 :hover)里。这样为了过渡效果在“进入”和“离开”状态时都能生效。

》》❌ 错误的写法(只写在 :hover 里)

.box {width: 100px;height: 100px;background: blue;
}.box:hover {background: red;width: 200px;/* 过渡只定义在hover状态 */transition: all 0.5s ease;
}

在这里插入图片描述
》》✅ 正确的写法(写在默认状态)

.box {width: 100px;height: 100px;background: blue;/* 过渡定义在默认状态,对所有状态变化都有效 */transition: all 0.5s ease;
}.box:hover {background: red;width: 200px;
}

在这里插入图片描述

》》如果你想对“进入”和“离开”设置不同的过渡效果,可以这样做

.box {width: 100px;height: 100px;background: blue;/* 定义“离开”(返回初始状态)的过渡:慢速离开 */transition: all 1s ease-in-out;
}.box:hover {background: red;width: 200px;/* 覆盖“进入”(到达hover状态)的过渡:快速进入 */transition: all 0.3s ease;
}

在这里插入图片描述

CSS层叠特性

相同的属性会覆盖,后面的CSS属性会覆盖前面的CSS属性
不同的属性会叠加,不同的CSS属性都会生效

特殊情况:仅需要单次动画时

如果你确实只希望在状态改变的一个方向上有动画,另一个方向上立即生效,那么写在触发状态里也是可以的。但这种情况相对少见。

/*一个模态框的关闭动作你希望是瞬间的,而打开是动画的。*/
.modal {opacity: 0;transform: scale(0.8);
}.modal.open {opacity: 1;transform: scale(1);/* 只有添加.open类时有过渡 */transition: all 0.3s ease;
}
http://www.dtcms.com/a/485859.html

相关文章:

  • HTML实现流星雨
  • JavaWeb-html、css-网页正文制作
  • GaussDB 分布式下, 报错concurrent update under Stream mode is not yet support
  • 服务器连接百度网盘并下载文件
  • 云计算实验3——CentOS中storm的安装
  • 一次被“动画关闭”启发的思考:Animate.css 与 prefers-reduced-motion 的无障碍设计
  • 《突破同质化:太空殖民地NPC行为差异化的底层架构》
  • 做网站ppt常见c2c网站有哪些
  • 专业手机网站建设价格明细表wordpress xiu 5.6
  • CSS 组合选择符详解
  • css:`target-before and :target-after 和 scroll-target-group`
  • 项目中执行SQL报错oracle.jdbc.OracleDatabaseException: ORA-00942: 表或视图不存在
  • 上门养老小程序源码 uniapp PHP MySQL
  • 供应链数据分析:Excel+Power BI双引擎打造智能供应链
  • 从零开始部署 GitLab CE 18.4.2:Docker Compose 新手教程
  • 高并发内存池日志
  • 使用PyTorch实现自定义损失函数以FocalLoss为例的详细教程
  • 《彻底理解C语言指针全攻略(4)--数组与指针的关系专题(下)》
  • app模板网站网站的源代码有什么用
  • Vue3的Pinia状态管理库【8】
  • 网站建设后台做网站难
  • 禅城区响应式网站怎么做企业网站推广
  • K8S(九)—— Kubernetes持久化存储深度解析:从Volume到PV/PVC与动态存储
  • 【课堂笔记】概率论-1
  • Java 大视界 -- Java 大数据在智能金融区块链跨境支付与结算中的应用
  • 面试_项目问题_RPC调用异常
  • 金融分析师核心能力构建:从数据解读到战略洞察
  • 【八股笔记】SSM
  • Selenium WebDriver自动化测试(框架篇)--数据驱动测试
  • WUJIE VS QIANKUN 微前端框架选型(一)