首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用香草JS在动画的任意点反转CSS动画(或CSS转换)?

如何使用香草JS在动画的任意点反转CSS动画(或CSS转换)?
EN

Stack Overflow用户
提问于 2022-03-15 04:22:12
回答 2查看 47关注 0票数 0

场景:

在鼠标移动事件(悬停)上,动画播放(比如动画图像变得更大)。然后,在鼠标退出事件上,动画反转(动画图像在鼠标上无缝缩小,而不是在图像上徘徊)。动画在鼠标退出图像空间的任何时候都会反转。

约束:

  • 对象在

文件中的

  • 动画CSS属性(或CSS转换属性),在CSS文件中使用
  • ,在JS文件中使用

事件,在JS文件中使用

  • 使用JS文件中的JS事件侦听器函数(

f 213)

EN

回答 2

Stack Overflow用户

发布于 2022-03-15 05:27:07

如果您使用的是transition而不是animation,这是相对容易的:

代码语言:javascript
复制
.hoverme {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: pink;
  transition: height 10s, width 10s;
}

.hoverme:hover {
  height: 300px;
  width: 300px;
}
代码语言:javascript
复制
<div class="hoverme">hover me</div>

票数 2
EN

Stack Overflow用户

发布于 2022-03-15 06:11:53

看看这个,

代码语言:javascript
复制
.hoverme {
  padding: 50px;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hoverme:hover {
  transform: scale(1.5);
}
代码语言:javascript
复制
<img class="hoverme" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYQAAACCCAMAAABxTU9IAAAAxlBMVEX/SBT+9fPvPSL98e//Rg//PQD++ff/r6D97On9RRb1QR3/NwABP1L/LwD/QgD/Qwj/hG75Qxr+4dn/f2n+5+H/oIr/moP+/f3/aUv+q5r28fDS1db/b1T/dVv+08n/emb+2NP/iXb/uqr/Wi7/SwT/bUb/gmT/ZUT+zMD/j3b/kX//UiH/xbni4eGBlp5YeISstrpviJHFycxQZnMAGDYAKUEgR1oAHzugq7AAMkiKkplmdYGWn6U7W2pMbnoyR1gAACgAABf0PUxhAAAD1UlEQVR4nO3c/3OaSBjHcfdgVxKCKApEk1iL12pqvTOmXE16d23//3/qdhGj+VLjzXTFqe/XTJxA8sPOfvLsAwSo1QAAAAAAAAAAAAAAAAAAAAAAAI6RK/2CbLhVD+U4uTIIfn/XTOI4Tt4P/cBvVD2ioxP6wageCaVSVXx5/WQY+NTDHoV+LYlS5XiaU3x6Ik2jxCWGvZFu0jEJOGLNMTl0koasenDHwQ1GY+U4T0IocnBU/zygGOwL5bUug+WcC/E0BtW5ZkmyLgy7wnk2+w884XwgBcvCRrwlAlMMOgVWJKtcP9lWB6Y9eyJq+1WP85cm29HWQjDd2hHjc46R7JHnY7V9MVqeM3S5jGGNW9NNeVsGq2KImixItvjNzvauvAzBcVQ2DKse7C/KrdW3L0brIDpvKQU7ZHvweiEsQxD1CV3BBrcRv94RVqI2B0g2yNHHnUNwvJgDJBtkM9q1DgSt2Q43TNZX7FSapurJxKtHuwasRxaEk/WxkZr+8ees9zgFdXFzM1cP+7wPhPDz6bPlVUtQF7ef8k/3j0JQ878+5/livR5x1myBvOw/zPgiPzu7u51vpKB693pf/uVCrUKou4Tw08nL8WrGe3/f6RD+MSEU64/5KEK4uyUEqzZCULOzu7PPX6ZK9C6mqVLzWU+oRa733fcIwSZ5tV6OdAr5v/qPXs3yr7OLm2+6AJQuj/xmulqhCMGKzRBE2usVC1FvkX///q1YhNRqHyHY8ygEPedlGtPFYl6uQWqjUROCFfLNQLzAnKI9PW0jBFt+EMIPEIIVhHAACOEAEMIB0CHs/C8dQrCESjgAsh2J53diE8JeEcIBMHdACvNYwk4xEIIVphKE2LUYCMEKKuEAyGb0wiNShLBXhHAACOEA/J97vwjBElMJhFAx+bZDJVRNh1BWgrPlBvnVzwjBilUIZprXKZjvNjIxPyt6NyFYUS5H+ggpS/rOQ1F06tfjjUgyvVUEQwg2LBuznvXED0blbal6vuMgaHTLTDyRTQI/LmqFEGyQb8xVVOGZ5/X9q0iZd+zoDHy3JidZcT3DUx+HsuYGJgWPEGwIh1kqVOe6eGeCfzVIhd5Kiluv5TBTmhOH5nZ4V9eCEiLm1ngLGqMsykblU5ly2B3042H5LhHZuOpmemv5cI4rL7N+POFJHRsamy+60xu6G6y2zAvx/I0t/ZtkAAAAAAA4YielqsdxlFqnp789d9oijT05eWH6N7SqHt8xaG3PQNdD1SM8Aq8UAqWwJ62XGkLZFaoe25E50d15rcUhEgAAAAAAAAAAAAAAAAAAAI7YfwZqP9bVk7iVAAAAAElFTkSuQmCC">

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71477036

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档