请问transition如何只针对transform的scale进行过度动画

zhiweixuexi6 2018-11-26 09:36:11

我有一图片可以移动和放大缩小的。我想只让放大缩小（transform:scale）这个有过度动画，而移动图片（transform:translate）没有过度动画，请问应该怎样写了？

...全文

1376 2 打赏收藏转发到动态举报

写回复

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 移动图片

transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动可以在缩放的同时添加一个旋转如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决如： transform:translate(-50%); 换成： transform: translate(calc(-50% + 1px)); clac是css3

transition 过渡与transform动画这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）

<!DOCTYPE html> <html> <head> <title>2d动画缩放效果</title> <style type="text/css"> h1{text-shadow: 5px 5px 6px yellow;} div{width: 100px;height: 100px;background: linear-gradient(to right,red,yellow);border:pink 2px so.

经常被这些这些属性搞晕,今天来系统总结一下, 下次忘了直接过来看...首先解释一下名词, 注意标题中提到的几个词并不一定都是平级关系transform: 其实与width,height等属于是平级关系, width代表宽度, height代表高度, transform代表缩放,平移,旋转等translate, rotate, scale 这三个属性可以理解为 transform的子属性:trans...

css：过渡transition 、转换transform、动画animation

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章