社区
CSS
帖子详情
请问transition如何只针对transform的scale进行过度动画
zhiweixuexi6
2018-11-26 09:36:11
我有一图片可以移动和放大缩小的。我想只让放大缩小(transform:scale)这个有过度动画,而移动图片(transform:translate)没有过度动画,请问应该怎样写了?
...全文
1482
2
打赏
收藏
请问transition如何只针对transform的scale进行过度动画
我有一图片可以移动和放大缩小的。我想只让放大缩小(transform:scale)这个有过度动画,而移动图片(transform:translate)没有过度动画,请问应该怎样写了?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
jerry_loo
2018-12-16
打赏
举报
回复
1
如果你前面已经有了类似:transform: scale(2);
那么在使用transition就选择transform即可:
transition: transform 400ms linear;
如果你是transform:translateX(100px) scale(2); 有多个过渡,
那么transform:translateX(100px)写在另一个选择器里,
单独针对transform: scale(2);和transition: transform 400ms linear;放在一起
天际的海浪
2018-11-26
打赏
举报
回复
用 left top 移动图片
10种纯CSS3
transform
鼠标悬停到图片上过渡
动画
显示
10种纯CSS3
transform
鼠标悬停到图片上过渡
动画
显示 10种纯CSS3
transform
鼠标悬停到图片上过渡
动画
显示
CSS
动画
属性详解[代码]
本文详细介绍了CSS中
transform
、translate和
transition
三个属性的作用及使用方法。
transform
用于对元素
进行
2D或3D变换,如旋转、缩放、平移等;translate是
transform
的一个函数,专门用于平移元素;
transition
用于定义元素样式变化的过渡效果。文章还介绍了CSS中常用的
动画
实现方式,包括使用
transition
实现简单
动画
、使用@keyframes和animation实现复杂
动画
、结合
transform
和
transition
实现交互效果,以及使用will-change优化
动画
性能。通过综合示例展示了这些属性和方法的实际应用,帮助开发者实现丰富的
动画
效果,提升用户体验。
CSS3实现3种网页
过度
效果代码.zip
CSS3实现3种网页
过度
效果代码是一款可独立用于网页设计展示的CSS3特效代码。
CSS3过渡效果飞机案列
用到了CSS3的
transition
,
transform
和 translate组合形成效果,非
动画
CSS3实现炫酷鼠标hover
动画
特效.zip
CSS3实现炫酷鼠标hover
动画
特效.zip
CSS
61,125
社区成员
60,706
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章